forked from Gitlink/forgeplus-react
Compare commits
1 Commits
master
...
dev_assist
| Author | SHA1 | Date |
|---|---|---|
 caishi
|
fa55253398 |
16
.babelrc
16
.babelrc
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
"es2015",
|
||||
"react",
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": [[
|
||||
"transform-runtime",
|
||||
{
|
||||
"helpers": false,
|
||||
"polyfill": false,
|
||||
"regenerator": true,
|
||||
"moduleName": "babel-runtime"
|
||||
}
|
||||
]]
|
||||
}
|
||||
16
README.md
16
README.md
|
|
@ -1,16 +0,0 @@
|
|||
<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,7 +17,16 @@ 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);
|
||||
|
|
@ -132,6 +141,7 @@ module.exports = {
|
|||
name: "static/media/[name].[hash:8].[ext]",
|
||||
},
|
||||
},
|
||||
// Process JS with Babel.
|
||||
{
|
||||
test: /\.(js|jsx|mjs)$/,
|
||||
include: paths.appSrc,
|
||||
|
|
@ -151,8 +161,10 @@ module.exports = {
|
|||
],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.css$/,
|
||||
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
27
package.json
27
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "forge",
|
||||
"version": "3.0.0",
|
||||
"name": "educoder",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^2.3.0",
|
||||
|
|
@ -10,11 +10,11 @@
|
|||
"array-flatten": "^2.1.2",
|
||||
"autoprefixer": "7.1.6",
|
||||
"axios": "^0.18.1",
|
||||
"babel-core": "6.26.0",
|
||||
"babel-eslint": "7.2.3",
|
||||
"babel-jest": "20.0.3",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-react-app": "^3.1.1",
|
||||
"babel-runtime": "6.26.0",
|
||||
"bizcharts": "^3.5.8",
|
||||
|
|
@ -27,11 +27,9 @@
|
|||
"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.9.0",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"echarts": "^4.7.0",
|
||||
"editor.md": "^1.5.0",
|
||||
"eslint": "4.10.0",
|
||||
"eslint-config-react-app": "^2.1.0",
|
||||
|
|
@ -48,7 +46,6 @@
|
|||
"install": "^0.12.2",
|
||||
"jest": "20.0.4",
|
||||
"js-base64": "^2.5.2",
|
||||
"js2wordcloud": "^1.1.12",
|
||||
"katex": "^0.11.1",
|
||||
"lodash": "^4.17.15",
|
||||
"loglevel": "^1.6.8",
|
||||
|
|
@ -65,7 +62,7 @@
|
|||
"postcss-loader": "2.0.8",
|
||||
"promise": "8.0.1",
|
||||
"prop-types": "^15.6.1",
|
||||
"qrcode.react": "^1.0.1",
|
||||
"qrcode.react": "^1.0.0",
|
||||
"qs": "^6.9.3",
|
||||
"quill": "^1.3.7",
|
||||
"quill-delta-to-html": "^0.11.0",
|
||||
|
|
@ -95,7 +92,6 @@
|
|||
"react-resizable": "^1.10.1",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-slick": "^0.28.1",
|
||||
"react-split-pane": "^0.1.91",
|
||||
"react-url-query": "^1.5.0",
|
||||
"react-zmage": "^0.8.5-beta.31",
|
||||
|
|
@ -106,7 +102,6 @@
|
|||
"scroll-into-view": "^1.14.2",
|
||||
"showdown": "^1.9.1",
|
||||
"showdown-katex": "^0.8.0",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"store": "^2.0.12",
|
||||
"style-loader": "0.19.0",
|
||||
"styled-components": "^4.4.1",
|
||||
|
|
@ -116,9 +111,7 @@
|
|||
"webpack-dev-server": "^3.10.3",
|
||||
"webpack-manifest-plugin": "^2.2.0",
|
||||
"whatwg-fetch": "2.0.3",
|
||||
"wrap-md-editor": "^0.2.20",
|
||||
"xterm": "4.8.1",
|
||||
"xterm-addon-fit": "0.4.0"
|
||||
"wrap-md-editor": "^0.2.20"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "node --max_old_space_size=15360 scripts/start.js",
|
||||
|
|
@ -189,14 +182,7 @@
|
|||
"port": "3007",
|
||||
"devDependencies": {
|
||||
"@babel/runtime": "7.0.0-beta.51",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"compression-webpack-plugin": "^1.1.12",
|
||||
"concat": "^1.0.3",
|
||||
"happypack": "^5.0.1",
|
||||
|
|
@ -204,7 +190,6 @@
|
|||
"node-sass": "^4.12.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"purgecss": "^2.1.2",
|
||||
"react-json-view": "^1.21.3",
|
||||
"reqwest": "^2.0.5",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"terser-webpack-plugin": "^2.3.5",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -38,6 +38,78 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li {
|
||||
float: left;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li a:hover {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li:last-child {
|
||||
margin-right: 0px
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li.active a {
|
||||
color: #459be5 !important;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li.active p {
|
||||
color: #459be5 !important;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li p:hover {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li p {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li.active div ul li a {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li.active div ul li a:hover {
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li.active ul li a {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li.active ul li a:hover {
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li.active:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
right: auto;
|
||||
height: 2px;
|
||||
width: 14px;
|
||||
background-color: #459be5;
|
||||
}
|
||||
|
||||
.nav-img {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
|
|
|
|||
|
|
@ -1753,7 +1753,7 @@ a.decoration {
|
|||
}
|
||||
|
||||
.mb15 {
|
||||
margin-bottom: 15px!important;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mb16 {
|
||||
|
|
@ -2346,6 +2346,7 @@ input::-ms-clear {
|
|||
/*中间部分宽度固定为1200*/
|
||||
.newMain {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 110px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
|
|
@ -2424,16 +2425,10 @@ input::-ms-clear {
|
|||
.color-grey-c {
|
||||
color: #ccc !important;
|
||||
}
|
||||
a.hoverLine:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.color-grey-cd {
|
||||
color: #cdcdcd !important;
|
||||
}
|
||||
.color-grey-d {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
|
||||
.color-grey-9 {
|
||||
color: #999999 !important;
|
||||
|
|
@ -3415,7 +3410,7 @@ a.user_bluebg_btn {
|
|||
}
|
||||
|
||||
.cdefault {
|
||||
cursor: default!important;
|
||||
cursor: default
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3590,6 +3585,42 @@ a.user_bluebg_btn {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/*-------------------个人主页：右侧提示区域--------------------------*/
|
||||
.-task-sidebar {
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
height: 180px;
|
||||
right: 0;
|
||||
bottom: 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.-task-sidebar div {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
background: #4CACFF;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.-task-sidebar div i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.-task-sidebar div i:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.gotop {
|
||||
background-color: rgba(208, 207, 207, 0.5) !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
/***** loading ******/
|
||||
/*****载入中******/
|
||||
|
|
@ -3914,21 +3945,11 @@ html>body #ajax-indicator {
|
|||
max-height: 340px;
|
||||
}/*头部导航条样式---2018-03-19--by-cs*/
|
||||
|
||||
.privateTag{
|
||||
display: block;
|
||||
padding:0px 6px;
|
||||
border-radius: 12px;
|
||||
border:1px solid #2FC25B;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
color: #2FC25B;
|
||||
}
|
||||
.head-nav {
|
||||
text-align: center;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
min-width: 780px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -3950,7 +3971,7 @@ html>body #ajax-indicator {
|
|||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
padding-right:40px;
|
||||
padding:0px 20px;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li a {
|
||||
|
|
@ -4087,6 +4108,21 @@ em.vertical-line {
|
|||
|
||||
/* 右侧内容宽度变化的话，需要调整posi-search right的值*/
|
||||
|
||||
/*底部*/
|
||||
.newFooter {
|
||||
max-height: 110px;
|
||||
}
|
||||
|
||||
.newFooter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #323232;
|
||||
clear: both;
|
||||
min-width: 1200px;
|
||||
z-index: 8;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.footercon {
|
||||
border-bottom: 1px solid #47494d;
|
||||
|
|
@ -6682,19 +6718,4 @@ ul.count_ul li:not(:last-child):after {
|
|||
}
|
||||
input.ant-input-lg::placeholder{
|
||||
font-size: 14px !important;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
.toprightNum{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top:4px;
|
||||
color: #999;
|
||||
}
|
||||
.ant-input, .ant-input .ant-input-suffix{
|
||||
background-color: #fff!important;
|
||||
}
|
||||
.has-error .ant-input{
|
||||
background-color: #FEF1F0!important;
|
||||
}
|
||||
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
|
After Width: | Height: | Size: 584 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,111 +0,0 @@
|
|||
|
||||
.CodeMirror-merge {
|
||||
position: relative;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.CodeMirror-merge, .CodeMirror-merge .CodeMirror {
|
||||
min-height:50px;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-2pane .CodeMirror-merge-pane { width: 48%; }
|
||||
.CodeMirror-merge-2pane .CodeMirror-merge-gap { width: 4%; }
|
||||
.CodeMirror-merge-3pane .CodeMirror-merge-pane { width: 31%; }
|
||||
.CodeMirror-merge-3pane .CodeMirror-merge-gap { width: 3.5%; }
|
||||
|
||||
.CodeMirror-merge-pane {
|
||||
display: inline-block;
|
||||
white-space: normal;
|
||||
vertical-align: top;
|
||||
}
|
||||
.CodeMirror-merge-pane-rightmost {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-gap {
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #515151;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-scrolllock-wrap {
|
||||
position: absolute;
|
||||
bottom: 0; left: 50%;
|
||||
}
|
||||
.CodeMirror-merge-scrolllock {
|
||||
position: relative;
|
||||
left: -50%;
|
||||
cursor: pointer;
|
||||
color: #d8d8d8;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-copybuttons-left, .CodeMirror-merge-copybuttons-right {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
right: 0; bottom: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-copy {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
color: #ce374b;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-copy-reverse {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
color: #44c;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-copybuttons-left .CodeMirror-merge-copy { left: 2px; }
|
||||
.CodeMirror-merge-copybuttons-right .CodeMirror-merge-copy { right: 2px; }
|
||||
|
||||
.CodeMirror-merge-r-inserted, .CodeMirror-merge-l-inserted {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAGUlEQVQI12MwuCXy3+CWyH8GBgYGJgYkAABZbAQ9ELXurwAAAABJRU5ErkJggg==);
|
||||
background-position: bottom left;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-r-deleted, .CodeMirror-merge-l-deleted {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAGUlEQVQI12M4Kyb2/6yY2H8GBgYGJgYkAABURgPz6Ks7wQAAAABJRU5ErkJggg==);
|
||||
background-position: bottom left;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.CodeMirror-merge-r-chunk { background: #9a6868; }
|
||||
.CodeMirror-merge-r-chunk-start { /*border-top: 1px solid #ee8; */}
|
||||
.CodeMirror-merge-r-chunk-end {/* border-bottom: 1px solid #ee8; */}
|
||||
.CodeMirror-merge-r-connect { fill:#9a6868;}
|
||||
|
||||
.CodeMirror-merge-l-chunk { background: #eef; }
|
||||
.CodeMirror-merge-l-chunk-start { border-top: 1px solid #88e; }
|
||||
.CodeMirror-merge-l-chunk-end { border-bottom: 1px solid #88e; }
|
||||
.CodeMirror-merge-l-connect { fill: #eef; stroke: #88e; stroke-width: 1px; }
|
||||
|
||||
.CodeMirror-merge-l-chunk.CodeMirror-merge-r-chunk { background: #dfd; }
|
||||
.CodeMirror-merge-l-chunk-start.CodeMirror-merge-r-chunk-start { border-top: 1px solid #4e4; }
|
||||
.CodeMirror-merge-l-chunk-end.CodeMirror-merge-r-chunk-end { border-bottom: 1px solid #4e4; }
|
||||
|
||||
.CodeMirror-merge-collapsed-widget:before {
|
||||
content: "(...)";
|
||||
}
|
||||
.CodeMirror-merge-collapsed-widget {
|
||||
cursor: pointer;
|
||||
color: #88b;
|
||||
background: #eef;
|
||||
border: 1px solid #ddf;
|
||||
font-size: 90%;
|
||||
padding: 0 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.CodeMirror-merge-collapsed-line .CodeMirror-gutter-elt { display: none; }
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 8.8 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" class="notranslate translated-ltr" translate="no">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name=”Keywords” Content=”trustie,trustieforge,forge,确实让创建更美好,协同开发平台″>
|
||||
|
|
@ -8,9 +8,18 @@
|
|||
<meta name=”Description” Content=”持续构建协同、共享、可信的软件创建生态开源创作与软件生产相结合，支持大规模群体开展软件协同创新活动”>
|
||||
<meta name="theme-color" content="#000000">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/iconfont.css">
|
||||
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css">
|
||||
<!-- <script type="text/javascript">
|
||||
window.__isR = true;
|
||||
if (
|
||||
(navigator.userAgent.indexOf('MSIE 9') != -1
|
||||
|| navigator.userAgent.indexOf('MSIE 10') != -1)
|
||||
&&
|
||||
location.pathname.indexOf("/compatibility") == -1) {
|
||||
location.href = '/compatibility.html'
|
||||
}
|
||||
</script> -->
|
||||
<link rel=" stylesheet" type="text/css" href="%PUBLIC_URL%css/iconfont.css">
|
||||
<link rel=" stylesheet" type="text/css" href="%PUBLIC_URL%css/edu-purge.css">
|
||||
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/editormd.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%css/merge.css">
|
||||
<%= htmlWebpackPlugin.tags.headTags %>
|
||||
|
|
@ -21,7 +30,6 @@
|
|||
<div id="root" class="page -layout-v -fit widthunit"></div>
|
||||
<div id="picture_display" style="display: none;"></div>
|
||||
<script src="%PUBLIC_URL%js/jquery-1.8.3.min.js"></script>
|
||||
<script src="%PUBLIC_URL%js/js_min_all.js"></script>
|
||||
<script src="%PUBLIC_URL%js/codemirror/codemirror.js"></script>
|
||||
<script src="%PUBLIC_URL%js/editormd/editormd.min.js"></script>
|
||||
<script src="%PUBLIC_URL%js/codemirror/merge/merge.js"></script>
|
||||
|
|
|
|||
|
|
@ -60,13 +60,12 @@ body {
|
|||
.ant-progress-textno {
|
||||
color: #f5222d;
|
||||
}
|
||||
.CodeMirror pre.CodeMirror-line{
|
||||
font-size: 16px!important;
|
||||
}
|
||||
|
||||
/* md多空格 */
|
||||
.markdown-body p {
|
||||
margin:10px 0px!important;
|
||||
font-size: 16px !important;
|
||||
line-height: 2 !important;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
|
@ -88,10 +87,6 @@ body {
|
|||
border-left: 1px solid rgb(221, 221, 221);
|
||||
/* 某些情况下，被cm盖住了 */
|
||||
z-index: 99;
|
||||
padding:8px 8px 50px;
|
||||
}
|
||||
.editormd-preview .markdown-body{
|
||||
padding:0px !important;
|
||||
}
|
||||
|
||||
/* 图片点击放大的场景，隐藏图片链接 */
|
||||
|
|
|
|||
88
src/App.js
88
src/App.js
|
|
@ -9,7 +9,7 @@ import {
|
|||
} from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import LoginDialog from './modules/login/LoginDialog';
|
||||
import 'babel-polyfill';
|
||||
|
||||
import Loading from './Loading'
|
||||
|
||||
import Loadable from 'react-loadable';
|
||||
|
|
@ -17,7 +17,8 @@ import marked from './common/marked';
|
|||
import moment from 'moment'
|
||||
|
||||
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
|
||||
import SiderBar from './forge/Component/SiderBar'
|
||||
|
||||
import history from './history';
|
||||
|
||||
import { SnackbarHOC } from 'educoder'
|
||||
import { initAxiosInterceptors } from './AppConfig'
|
||||
|
|
@ -39,11 +40,6 @@ const Projects = Loadable({
|
|||
loader: () => import('./forge/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
//forge安全设置
|
||||
const Security = Loadable({
|
||||
loader: () => import('./forge/SecuritySetting/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
//forge项目-devOps详情
|
||||
const OpsDetail = Loadable({
|
||||
loader: () => import('./forge/DevOps/opsDetail'),
|
||||
|
|
@ -74,19 +70,7 @@ const OrganizeIndex = Loadable({
|
|||
loader: () => import('./forge/Team/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
const EducoderLogin = Loadable({
|
||||
loader: () => import('./modules/login/EducoderLogin'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Search = Loadable({
|
||||
loader: () => import('./modules/search/'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const ProjectIndex = Loadable({
|
||||
loader: () => import("./forge/Index"),
|
||||
loading: Loading,
|
||||
});
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -112,9 +96,36 @@ class App extends Component {
|
|||
Addcoursestypes: false
|
||||
})
|
||||
};
|
||||
ModalCancelsy = () => {
|
||||
this.setState({
|
||||
mydisplay: false,
|
||||
})
|
||||
window.location.href = "/";
|
||||
};
|
||||
ModalshowCancelsy = () => {
|
||||
this.setState({
|
||||
mydisplay: true,
|
||||
})
|
||||
};
|
||||
|
||||
disableVideoContextMenu = () => {
|
||||
window.$("body").on("mousedown", "video", function (event) {
|
||||
if (event.which === 3) {
|
||||
window.$('video').bind('contextmenu', function () { return false; });
|
||||
} else {
|
||||
window.$('video').unbind('contextmenu');
|
||||
}
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
document.title = "loading...";
|
||||
this.disableVideoContextMenu();
|
||||
history.listen(() => {
|
||||
this.forceUpdate()
|
||||
const $ = window.$
|
||||
$("html").animate({ scrollTop: $('html').scrollTop() - 0 })
|
||||
});
|
||||
|
||||
initAxiosInterceptors(this.props);
|
||||
this.getAppdata();
|
||||
|
||||
|
|
@ -134,7 +145,7 @@ class App extends Component {
|
|||
this.setState({
|
||||
mygetHelmetapi: undefined
|
||||
});
|
||||
document.title = "Forge";
|
||||
document.title = "实践教学";
|
||||
var link = document.createElement('link'),
|
||||
oldLink = document.getElementById('dynamic-favicon');
|
||||
link.id = 'dynamic-favicon';
|
||||
|
|
@ -192,14 +203,17 @@ class App extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { mygetHelmetapi } = this.state;
|
||||
let personal = mygetHelmetapi && mygetHelmetapi.personal;
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<MuiThemeProvider theme={theme}>
|
||||
{/* <Accountnewprofile {...this.props}{...this.state} /> */}
|
||||
<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
|
||||
<SiderBar/>
|
||||
{/* <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>
|
||||
{/*项目*/}
|
||||
|
|
@ -211,14 +225,6 @@ class App extends Component {
|
|||
}
|
||||
}>
|
||||
</Route>
|
||||
<Route
|
||||
path={"/settings"}
|
||||
render={
|
||||
(props) => {
|
||||
return (<Security {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
}>
|
||||
</Route>
|
||||
{/*项目*/}
|
||||
<Route
|
||||
path={"/projects"}
|
||||
|
|
@ -228,14 +234,7 @@ class App extends Component {
|
|||
}
|
||||
}>
|
||||
</Route>
|
||||
<Route
|
||||
path="/register"
|
||||
render={
|
||||
(props) => {
|
||||
return (<EducoderLogin {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
{/*403*/}
|
||||
<Route path="/403" component={Shixunauthority} />
|
||||
|
||||
|
|
@ -243,16 +242,12 @@ class App extends Component {
|
|||
<Route path={"/organize"}
|
||||
render={
|
||||
(props) => {
|
||||
return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
|
||||
return (<OrganizeIndex {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
}>
|
||||
</Route>
|
||||
{/*404*/}
|
||||
<Route path="/nopage" component={Shixunnopage} />
|
||||
|
||||
{/* 查询 */}
|
||||
<Route path="/search" component={Search} />
|
||||
|
||||
{/* 个人主页 */}
|
||||
<Route path="/users/:username"
|
||||
render={
|
||||
|
|
@ -263,10 +258,7 @@ class App extends Component {
|
|||
<Route exact path="/"
|
||||
render={
|
||||
(props) => (
|
||||
personal && personal.length > 0 ?
|
||||
<InfosIndex {...this.props} {...props} />
|
||||
:
|
||||
<ProjectIndex {...this.props} {...props} />
|
||||
<Projects {...this.props} {...props} {...this.state}></Projects>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,19 @@ import axios from 'axios';
|
|||
import { requestProxy } from "./indexEduplus2RequestProxy";
|
||||
import { broadcastChannelOnmessage, isDev, queryString } from 'educoder';
|
||||
import { notification } from 'antd';
|
||||
|
||||
import cookie from 'react-cookies';
|
||||
import './index.css';
|
||||
|
||||
let message501 = false;
|
||||
|
||||
broadcastChannelOnmessage('refreshPage', () => {
|
||||
window.location.reload();
|
||||
window.location.reload()
|
||||
})
|
||||
|
||||
function locationurl(list) {
|
||||
if (window.location.port !== "3007") {
|
||||
window.location.href = list
|
||||
if (window.location.port === "3007") {
|
||||
|
||||
} else {
|
||||
window.location.href = list
|
||||
}
|
||||
}
|
||||
// TODO 开发期多个身份切换
|
||||
|
|
@ -24,22 +26,55 @@ if (isDev) {
|
|||
parsed = queryString.parse(_search);
|
||||
}
|
||||
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 || 'admin'
|
||||
}
|
||||
window.location.search.indexOf('debug=s') !== -1 ? 'student' :
|
||||
window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
|
||||
}
|
||||
function clearAllCookie() {
|
||||
cookie.remove('_educoder_session', { path: '/' });
|
||||
cookie.remove('autologin_trustie', { path: '/' });
|
||||
setpostcookie()
|
||||
}
|
||||
clearAllCookie();
|
||||
function setpostcookie() {
|
||||
const str = window.location.pathname;
|
||||
if (str.indexOf("/wxcode") !== -1) {
|
||||
cookie.remove('_educoder_session', { path: '/' });
|
||||
cookie.remove('autologin_trustie', { path: '/' });
|
||||
const _params = window.location.search;
|
||||
if (_params) {
|
||||
let _search = _params.split('?')[1];
|
||||
let _educoder_sessions = _search.split('&')[0].split('=');
|
||||
cookie.save('_educoder_session', _educoder_sessions[1], { domain: '.educoder.net', path: '/' });
|
||||
let autologin_trusties = _search.split('&')[1].split('=');
|
||||
cookie.save('autologin_trustie', autologin_trusties[1], { domain: '.educoder.net', path: '/' });
|
||||
}
|
||||
}
|
||||
}
|
||||
setpostcookie();
|
||||
|
||||
window._debugType = debugType;
|
||||
export function initAxiosInterceptors(props) {
|
||||
// 判断网络是否连接
|
||||
initOnlineOfflineListener();
|
||||
initOnlineOfflineListener()
|
||||
// TODO 避免重复的请求 https://github.com/axios/axios#cancellation
|
||||
var
|
||||
proxy = "http://localhost:3000";
|
||||
proxy = "https://testforgeplus.trustie.net";
|
||||
|
||||
var proxy = "https://testforgeplus.trustie.net";
|
||||
const requestMap = {};
|
||||
window.setfalseInRequestMap = function (keyName) {
|
||||
requestMap[keyName] = false;
|
||||
}
|
||||
//响应前的设置
|
||||
axios.interceptors.request.use(
|
||||
config => {
|
||||
if(config.url.indexOf("http") !== -1) {
|
||||
setpostcookie()
|
||||
clearAllCookie()
|
||||
|
||||
if (config.url.indexOf(proxy) !== -1) {
|
||||
return config
|
||||
}
|
||||
requestProxy(config);
|
||||
requestProxy(config)
|
||||
|
||||
let url = `/api${config.url}`;
|
||||
|
||||
if (`${config[0]}` !== `true`) {
|
||||
|
|
@ -53,12 +88,18 @@ export function initAxiosInterceptors(props) {
|
|||
} else {
|
||||
config.url = url;
|
||||
}
|
||||
setpostcookie();
|
||||
}
|
||||
if (config.url.indexOf('update_file') === -1) {
|
||||
requestMap[config.url] = true;
|
||||
|
||||
window.setTimeout("setfalseInRequestMap('" + config.url + "')", 900)
|
||||
}
|
||||
return config;
|
||||
},
|
||||
err => {
|
||||
return Promise.reject(err);
|
||||
});
|
||||
});
|
||||
|
||||
axios.interceptors.response.use(function (response) {
|
||||
if (response === undefined) {
|
||||
|
|
@ -107,6 +148,8 @@ export function initAxiosInterceptors(props) {
|
|||
message501 = false
|
||||
}, 2000);
|
||||
}
|
||||
requestMap[response.config.url] = false;
|
||||
setpostcookie();
|
||||
return response;
|
||||
}, function (error) {
|
||||
return Promise.reject(error);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,20 @@ class Loading extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return ""
|
||||
return (
|
||||
<div className="App" style={{ minHeight: '800px', width: "100%" }}>
|
||||
<style>
|
||||
{
|
||||
`
|
||||
.margintop{
|
||||
margin-top:20%;
|
||||
}
|
||||
`
|
||||
}
|
||||
</style>
|
||||
<Spin size="large" className={"margintop"} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export function getImageUrl(path) {
|
|||
if (isDev) {
|
||||
return `${local}/${path}`
|
||||
}
|
||||
return `${path}`;
|
||||
return `/${path}`;
|
||||
}
|
||||
|
||||
export function getImage(path) {
|
||||
|
|
@ -162,28 +162,28 @@ export function getmyUrl(geturl) {
|
|||
}
|
||||
|
||||
export function getUploadActionUrl(path, goTest) {
|
||||
return `${getUrl()}/api/attachments.json${isDev ?`${isDev ?`?debug=${window._debugType || 'admin'}` : ""}` : ""}`;
|
||||
return `${getUrl()}/api/attachments.json?debug=${window._debugType || 'admin'}`;
|
||||
}
|
||||
|
||||
export function getUploadLogoActionUrl() {
|
||||
return `${getUrl()}/api/resumes/logo.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`;
|
||||
return `${getUrl()}/api/resumes/logo.json?debug=${window._debugType || 'admin'}`;
|
||||
}
|
||||
|
||||
export function getUploadActionUrltwo(id) {
|
||||
return `${getUrlmys()}/api/shixuns/${id}/upload_data_sets.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
|
||||
return `${getUrlmys()}/api/shixuns/${id}/upload_data_sets.json?debug=${window._debugType || 'admin'}`
|
||||
}
|
||||
|
||||
export function getUploadActionUrlthree() {
|
||||
return `${getUrlmys()}/api/jupyters/import_with_tpm.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
|
||||
return `${getUrlmys()}/api/jupyters/import_with_tpm.json?debug=${window._debugType || 'admin'}`
|
||||
}
|
||||
|
||||
export function getupload_git_file(id) {
|
||||
return `${getUrlmys()}/api/shixuns/${id}/upload_git_file.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
|
||||
return `${getUrlmys()}/api/shixuns/${id}/upload_git_file.json?debug=${window._debugType || 'admin'}`
|
||||
}
|
||||
|
||||
|
||||
export function getUploadActionUrlOfAuth(id) {
|
||||
return `${getUrl()}/api/users/accounts/${id}/auth_attachment.json${isDev ?`?debug=${window._debugType || 'admin'}` : ""}`
|
||||
return `${getUrl()}/api/users/accounts/${id}/auth_attachment.json?debug=${window._debugType || 'admin'}`
|
||||
}
|
||||
|
||||
export function getRandomNumber(type) {
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ function CommentItem({
|
|||
const commentAvatar = (author) => (
|
||||
<img
|
||||
className="item-flex flex-image"
|
||||
src={author.image_url ? getImageUrl(`/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
|
||||
src={author.image_url ? getImageUrl(`images/${author.image_url}`) : 'https://b-ssl.duitang.com/uploads/item/201511/13/20151113110434_kyReJ.jpeg'}
|
||||
alt=""
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -76,4 +76,10 @@ 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,6 +157,7 @@ renderer.heading = function (text, level, raw) {
|
|||
})
|
||||
return '<h' + level + ' id="' + anchor + '">' + text + '</h' + level + '>'
|
||||
}
|
||||
|
||||
marked.setOptions({
|
||||
silent: true,
|
||||
smartypants: true,
|
||||
|
|
|
|||
|
|
@ -1,67 +1,46 @@
|
|||
import React, { useEffect, useRef, useMemo } from 'react'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import marked, { getTocContent, cleanToc, getMathExpressions, resetMathExpressions } from '../common/marked';
|
||||
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 '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 dompurify.sanitize(rs)
|
||||
}, [str]);
|
||||
return rs
|
||||
}, [str])
|
||||
|
||||
// 锚点跳转，链接地址里含#对应的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 + 120);
|
||||
}
|
||||
}
|
||||
}
|
||||
},[url,html])
|
||||
|
||||
const el = useRef();
|
||||
const el = useRef()
|
||||
function onAncherHandler(e) {
|
||||
let target = e.target;
|
||||
let target = e.target
|
||||
if (target.tagName.toUpperCase() === 'A') {
|
||||
let ancher = target.getAttribute('href');
|
||||
if (ancher && ancher.startsWith('#')) {
|
||||
let ancher = target.getAttribute('href')
|
||||
if (ancher.startsWith('#')) {
|
||||
e.preventDefault()
|
||||
let viewEl = document.getElementById(ancher.replace('#', ''))
|
||||
if (viewEl) {
|
||||
viewEl.scrollIntoView(true)
|
||||
viewEl.parentNode.scrollTop = viewEl.offsetTop
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,12 +61,6 @@ export default ({
|
|||
}
|
||||
}
|
||||
}, [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,17 +67,18 @@ function Index(props){
|
|||
}
|
||||
return(
|
||||
<div className="aboutPanels">
|
||||
|
||||
<div className="aboutContent">
|
||||
<AlignCenterBetween style={{padding:"14px 20px"}}>
|
||||
<span className="font-16"><i className="iconfont icon-xiangmujianjie mr5 font-16 color-blue"></i>项目概览</span>
|
||||
<AlignCenterBetween style={{padding:"14px 0px"}}>
|
||||
<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 className="padding20">
|
||||
<div>
|
||||
<MDEditor
|
||||
placeholder={"请输入描述信息"}
|
||||
height={500}
|
||||
height={200}
|
||||
mdID={"order-new-description"}
|
||||
initValue={content}
|
||||
onChange={onContentChange}
|
||||
|
|
@ -113,11 +114,11 @@ function Index(props){
|
|||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="padding20">
|
||||
<div style={{padding:"20px 0px"}}>
|
||||
{content ?
|
||||
<RenderHtml className="break_word_comments imageLayerParent" value={content} url={props.history.location}/>
|
||||
<RenderHtml className="break_word_comments imageLayerParent" value={content} />
|
||||
:
|
||||
<div>暂无概览~</div>
|
||||
<div>暂无简介~</div>
|
||||
}
|
||||
{attachments && attachments.length > 0 &&
|
||||
<Attachments
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
.aboutContent{
|
||||
border-radius: 2px;
|
||||
border: 1px solid #EEEEEE;
|
||||
padding:0px 30px;
|
||||
width:100%;
|
||||
background-color: #fff;
|
||||
margin-top:20px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React , { Component } from 'react';
|
||||
import { Dropdown , Menu , Icon , Pagination , Spin } from 'antd';
|
||||
import '../css/index.scss';
|
||||
import '../Branch/branch.scss';
|
||||
import '../Branch/branch.css';
|
||||
import './activity.css';
|
||||
import NoneData from '../Nodata';
|
||||
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ class ActivityItem extends Component {
|
|||
</p >
|
||||
}
|
||||
<p className="itemLine mt10">
|
||||
<Link to={`/users/${item && item.user_login}`} className="show-user-link">
|
||||
<img alt="" src={getImageUrl(`/${item.user_avatar}`)} className="createImage" />
|
||||
<Link to={`/users/${item && item.login}`} className="show-user-link">
|
||||
<img alt="" src={getImageUrl(`images/${item.user_avatar}`)} className="createImage" />
|
||||
<span className="mr20">{item.user_name}</span>
|
||||
</Link>
|
||||
{item.created_at && <span className="color-grey-9">创建于<span className="ml2 color-grey-6">{item.created_at}</span></span>}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,39 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Dropdown, Menu, Tooltip } from 'antd';
|
||||
import "./branch.scss";
|
||||
import React, { Component } from 'react';
|
||||
import { Dropdown, Icon, Tooltip } from 'antd';
|
||||
import "./branch.css";
|
||||
|
||||
function CloneAddress({http_url , ssh_url , zip_url , tar_url}) {
|
||||
const [ key , setKey ] = useState("HTTP");
|
||||
class CloneAddress extends Component {
|
||||
// 点击按钮复制功能
|
||||
function jsCopy(){
|
||||
jsCopy = () => {
|
||||
var e = document.getElementById("copy_rep_content");
|
||||
e.select();
|
||||
document.execCommand("Copy");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="downMenu">
|
||||
<div style={{padding:"10px 20px 20px 20px",borderBottom:"1px solid #eee"}}>
|
||||
<Menu className="urlMenu" selectedKeys={[key]} mode={"horizontal"}>
|
||||
<Menu.Item key="HTTP" onClick={(e)=>{setKey(e.key)}}>HTTP</Menu.Item>
|
||||
<Menu.Item key="SSH" onClick={(e)=>{setKey(e.key)}}>SSH</Menu.Item>
|
||||
</Menu>
|
||||
<div className="gitAddressClone">
|
||||
<input type="text" id="copy_rep_content" value={key==="HTTP" ? http_url:ssh_url} />
|
||||
<Tooltip title="复制链接">
|
||||
<span className="color-blue" onClick={jsCopy}><i className="iconfont icon-fuzhi"></i></span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
render() {
|
||||
const { http_url, downloadUrl } = this.props;
|
||||
return (
|
||||
<div className="gitAddressClone">
|
||||
{/* <p className="addressTips"><span>版本库地址已变更，请基于新地址提交代码</span></p> */}
|
||||
{
|
||||
http_url && <span>HTTP</span>
|
||||
}
|
||||
<input type="text" id="copy_rep_content" value={http_url} />
|
||||
<Tooltip title="复制链接">
|
||||
<span className="color-blue" onClick={() => this.jsCopy()}><i className="iconfont icon-fuzhi"></i></span>
|
||||
</Tooltip>
|
||||
{
|
||||
downloadUrl &&
|
||||
<span>
|
||||
<Dropdown overlay={downloadUrl} trigger={['click']} placement="bottomRight">
|
||||
<a className="ant-dropdown-link">
|
||||
<Icon type="cloud-download" className="font-18 fl color-blue" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</span>
|
||||
}
|
||||
</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>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CloneAddress;
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import React , { useState , useEffect } from 'react';
|
||||
import { Popover , Input , Spin } from 'antd';
|
||||
import './branch.scss';
|
||||
import './branch.css';
|
||||
import { getBranch , getTag } from '../GetData/getData';
|
||||
|
||||
|
||||
export default (({ projectsId , branch , owner , changeBranch , branchList , tagflag = true })=>{
|
||||
export default (({ projectsId , repo_id , changeBranch , branch , owner })=>{
|
||||
const [ showValue , setShowValue ] = useState(branch);
|
||||
const [ inputValue , setInputValue] = useState(undefined);
|
||||
const [ nav , setNav ] = useState(0);
|
||||
|
|
@ -17,7 +17,6 @@ export default (({ projectsId , branch , owner , changeBranch , branchList , tag
|
|||
useEffect(()=>{
|
||||
setShowValue(branch);
|
||||
},[branch])
|
||||
|
||||
useEffect(()=>{
|
||||
document.body.addEventListener('click', e => {
|
||||
let name = e.target.className;
|
||||
|
|
@ -31,12 +30,8 @@ export default (({ projectsId , branch , owner , changeBranch , branchList , tag
|
|||
})
|
||||
|
||||
useEffect(()=>{
|
||||
if(branchList){
|
||||
setData(branchList);
|
||||
setDatas(branchList);
|
||||
setIsSpin(false);
|
||||
}
|
||||
},[branchList])
|
||||
getBranchs(projectsId,owner);
|
||||
},[owner])
|
||||
|
||||
|
||||
async function getBranchs(id,owner){
|
||||
|
|
@ -68,7 +63,7 @@ export default (({ projectsId , branch , owner , changeBranch , branchList , tag
|
|||
}
|
||||
}
|
||||
function chooseitem(value){
|
||||
// setShowValue(value);
|
||||
setShowValue(value);
|
||||
changeBranch(value);
|
||||
}
|
||||
|
||||
|
|
@ -82,8 +77,8 @@ export default (({ projectsId , branch , owner , changeBranch , branchList , tag
|
|||
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>
|
||||
{ tagflag && <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>
|
||||
<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}>
|
||||
|
|
@ -102,10 +97,9 @@ export default (({ projectsId , branch , owner , changeBranch , branchList , tag
|
|||
</div>
|
||||
);
|
||||
return(
|
||||
<Popover placement='bottomLeft' visible={flag} content={menu} onClick={()=>setFlag(!flag)} overlayClassName="branch-tagBox-list">
|
||||
<Popover placement="bottom" visible={flag} content={menu} onClick={()=>setFlag(!flag)} overlayClassName="branch-tagBox-list">
|
||||
<div className="branch-tagBox">
|
||||
{/* {nav === 0 ?"分支":"标签"} */}
|
||||
<span className="color-grey-9 mr3 ml8"><i className="iconfont icon-fenzhi2 font-18"></i></span>
|
||||
<span className="color-grey-9 mr3 ml8">{nav === 0 ?"分支":"标签"}:</span>
|
||||
<a className="ant-dropdown-link">
|
||||
{showValue}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
min-width: 140px;
|
||||
min-width: 240px;
|
||||
}
|
||||
.branch-tagBox-list .ant-popover-arrow{
|
||||
display: none;
|
||||
|
|
@ -81,25 +81,4 @@
|
|||
.listTips{
|
||||
padding:20px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.urlMenu{
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: none;
|
||||
li.ant-menu-item{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding:0px 5px;
|
||||
margin-right: 20px!important;
|
||||
&.ant-menu-item-selected,&.ant-menu-item-active{
|
||||
color: #333;
|
||||
}
|
||||
&.ant-menu-item-selected{
|
||||
border-color:#1890ff!important;
|
||||
}
|
||||
&.ant-menu-item-active{
|
||||
border-color:transparent ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
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,showNotification}){
|
||||
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(`/${item && item.image_url}`)}
|
||||
alt=""
|
||||
/>
|
||||
<span className="ml10" style={{ verticalAlign: "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(){
|
||||
if(source && source.length>0){
|
||||
getID && getID(id);
|
||||
setSearchKey(undefined);
|
||||
}else{
|
||||
showNotification("请选择存在的用户!");
|
||||
}
|
||||
}
|
||||
|
||||
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,23 +1,19 @@
|
|||
import React from 'react';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Component.scss';
|
||||
|
||||
function Cards({img , title, desc , rightBtn , src , bottomInfos}){
|
||||
export default (({img , title, desc , rightBtn})=>{
|
||||
return(
|
||||
<div className="cards">
|
||||
{img &&<div className="img"><img src={getImageUrl(`/${img}`)} alt=""/></div>}
|
||||
<div className="img"><img src={img} alt=""/></div>
|
||||
<div className="content">
|
||||
<p className="titles">
|
||||
<Link to={src}>{title}</Link>
|
||||
<span>{title}</span>
|
||||
{rightBtn}
|
||||
</p>
|
||||
<div className="desc">
|
||||
{desc}
|
||||
</div>
|
||||
{bottomInfos}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Cards;
|
||||
})
|
||||
|
|
@ -19,8 +19,6 @@ 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;
|
||||
|
|
@ -29,10 +27,8 @@ li.ant-menu-item{
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
|
|
@ -43,9 +39,7 @@ li.ant-menu-item{
|
|||
justify-content: space-between;
|
||||
margin-bottom: 10px!important;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
line-height: 22px;;
|
||||
&>a{
|
||||
&>span{
|
||||
font-size:18px ;
|
||||
color: #333;
|
||||
}
|
||||
|
|
@ -56,13 +50,11 @@ 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;
|
||||
|
|
@ -112,9 +104,6 @@ li.ant-menu-item{
|
|||
right:240px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.laterest{
|
||||
color: #05690d;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px){
|
||||
.handleBox{
|
||||
|
|
@ -140,224 +129,4 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
.menuPanels{
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
.ant-popover-content,.ant-popover-inner{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.halfs{
|
||||
margin-top: 24px;
|
||||
padding:24px 0px 0px 0px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
.attrPerson{
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
.menuinfos{
|
||||
padding:15px 0px;
|
||||
&>a{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: 1px solid #eee;
|
||||
flex: 1;
|
||||
& >span:first-child{
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
& >span:last-child{
|
||||
color: #666;
|
||||
}
|
||||
&:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------------个人主页：右侧提示区域--------------------------*/
|
||||
.-task-sidebar {
|
||||
position: fixed;
|
||||
width: 40px;
|
||||
right: 0;
|
||||
bottom: 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px){
|
||||
.-task-sidebar{
|
||||
right:220px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1750px){
|
||||
.-task-sidebar{
|
||||
right:160px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1650px){
|
||||
.-task-sidebar{
|
||||
right:115px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1550px){
|
||||
.-task-sidebar{
|
||||
right:90px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1450px){
|
||||
.-task-sidebar{
|
||||
right:45px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px){
|
||||
.-task-sidebar{
|
||||
right:0px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.-task-sidebar>div {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 50%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 10px 1px #F1F1F1;
|
||||
}
|
||||
|
||||
.-task-sidebar>div i {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.-task-sidebar>div:hover i {
|
||||
color: #fff !important;
|
||||
}
|
||||
.-task-sidebar>div:hover{
|
||||
background: #1890FF;
|
||||
box-shadow: 0px 0px 10px 2px #B6D0FC;
|
||||
}
|
||||
.helpBox{
|
||||
width: 260px;
|
||||
z-index: 103;
|
||||
&.shareContent{
|
||||
width: 200px;
|
||||
}
|
||||
.ant-popover-inner-content{
|
||||
padding:0px;
|
||||
}
|
||||
p.titlecontent{
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
line-height: 20px;
|
||||
padding:15px 20px;
|
||||
}
|
||||
.faqUl{
|
||||
padding:0px 20px 10px;
|
||||
max-height: 230px;
|
||||
overflow-y: auto;
|
||||
li{
|
||||
background: #F5F5F5;
|
||||
border-radius: 20px;
|
||||
padding:0px 20px;
|
||||
color: #333;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
margin-bottom: 10px;
|
||||
a{
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #D1E9FF;
|
||||
a{
|
||||
color: #333!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shareUl{
|
||||
padding:10px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.titlecontent{
|
||||
margin-right: 20px;
|
||||
}
|
||||
li > i{
|
||||
font-size: 32px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.-task-desc {
|
||||
background: #494949;
|
||||
width: 90px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
z-index: 999999;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.-task-desc div {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -7px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.-task-desc div img {
|
||||
float: left
|
||||
}
|
||||
|
||||
.-task-sidebar .scan_ewm {
|
||||
position: absolute !important;
|
||||
right: 45px !important;
|
||||
bottom: 0px !important;
|
||||
background-color: #494949 !important;
|
||||
-webkit-box-sizing: border-box !important;
|
||||
box-sizing: border-box !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 16px !important;
|
||||
display: none;
|
||||
height: 213px !important;
|
||||
}
|
||||
|
||||
.trangle_right {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
bottom: 15px;
|
||||
width: 0;
|
||||
height: 0px;
|
||||
border-top: 6px solid transparent;
|
||||
border-left: 5px solid #494949;
|
||||
border-bottom: 6px solid transparent
|
||||
}
|
||||
}
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { AlignCenter , FlexAJ } from '../Component/layout';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Popover , Spin } from 'antd';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import './Component.scss';
|
||||
import { getUser } from '../GetData/getData';
|
||||
import axios from 'axios';
|
||||
|
||||
function Contributors({contributors,owner,projectsId}){
|
||||
const [ menuList ,setMenuList ]= useState([]);
|
||||
const [ list , setList ]= useState(undefined);
|
||||
const [ total , setTotal ]= useState(0);
|
||||
const [ menu , setMenu ] = useState("");
|
||||
const [ login , setLogin ] = useState(undefined);
|
||||
const [ isSpin , setIsSpin ] = useState(false);
|
||||
|
||||
useEffect(()=>{
|
||||
if(contributors && contributors.total_count>0){
|
||||
setTotal(contributors.total_count);
|
||||
setList(contributors.list);
|
||||
}
|
||||
},[contributors])
|
||||
|
||||
useEffect(()=>{
|
||||
if(login){
|
||||
getUsers(login);
|
||||
}else{
|
||||
setMenu(undefined);
|
||||
}
|
||||
},[login])
|
||||
|
||||
async function getUsers(login){
|
||||
setIsSpin(true);
|
||||
let a = menuList && menuList.filter(i=>i.login === login);
|
||||
if(a.length === 0){
|
||||
let result = await getUser(login);
|
||||
let arr = menuList;
|
||||
arr.push({...result});
|
||||
setMenuList(arr);
|
||||
setMenusFunc(result);
|
||||
setIsSpin(false);
|
||||
}else{
|
||||
setMenusFunc(a[0]);
|
||||
setIsSpin(false);
|
||||
}
|
||||
}
|
||||
|
||||
function setMenusFunc(data){
|
||||
if(data){
|
||||
let ele = (
|
||||
<Spin spinning={isSpin}>
|
||||
<FlexAJ>
|
||||
<AlignCenter>
|
||||
<Link to={`/users/${data.login}`}><img src={getImageUrl(`/${data.image_url}`)} alt="" className="radius" width="38px" height="38px"/></Link>
|
||||
<Link to={`/users/${data.login}`} className="ml10">{data.name}</Link>
|
||||
</AlignCenter>
|
||||
{
|
||||
data.is_watch ? <a className="color-grey-9" onClick={()=>FocusFunc(false,data.login)}>取消关注</a>:<a className="color-blue" onClick={()=>FocusFunc(true,data.login)}>关注</a>
|
||||
}
|
||||
</FlexAJ>
|
||||
<AlignCenter className="menuinfos">
|
||||
<a href={data.projects_url}>
|
||||
<span>{data.projects_count}</span>
|
||||
<span>项目数</span>
|
||||
</a>
|
||||
<a href={data.followers_url}>
|
||||
<span>{data.followers_count}</span>
|
||||
<span>粉丝数</span>
|
||||
</a>
|
||||
<a href={data.following_url}>
|
||||
<span>{data.following_count}</span>
|
||||
<span>关注数</span>
|
||||
</a>
|
||||
</AlignCenter>
|
||||
{
|
||||
data.organizations && data.organizations.length > 0 ?
|
||||
<AlignCenter className="font-12 pt4 pb4">
|
||||
<span>所属组织：</span>
|
||||
<div className="task-hide flex1">
|
||||
{renderArray(data.organizations)}
|
||||
</div>
|
||||
</AlignCenter>
|
||||
:""
|
||||
}
|
||||
{
|
||||
data.location && <AlignCenter className="font-12 pt4 pb4"><span>所在地址:</span><span className="ml5">{data.location}</span></AlignCenter>
|
||||
}
|
||||
</Spin>
|
||||
)
|
||||
setMenu(ele);
|
||||
}
|
||||
}
|
||||
|
||||
function FocusFunc(flag,login){
|
||||
axios({
|
||||
method: flag ? 'post' : 'delete',
|
||||
url: `/watchers/${flag ? 'follow' : 'unfollow'}.json`,
|
||||
params: {target_type: "user",id:login}
|
||||
}).then(result => {
|
||||
if (result && (result.data.status === 0 || result.data.status === 2)) {
|
||||
let a = menuList && menuList.filter(i=>i.login === login);
|
||||
if(a){
|
||||
a[0].is_watch = flag;
|
||||
}
|
||||
setMenusFunc(a[0]);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
function renderArray(array){
|
||||
let str = "";
|
||||
for(var i = 0;i<array.length;i++){
|
||||
str += array[i].name +"、";
|
||||
}
|
||||
let substr = str.substr(0,str.length-1);
|
||||
return (<span title={substr}>{substr}</span>)
|
||||
}
|
||||
|
||||
function setVisibleFunc(flag,l,index){
|
||||
if(l !== login){
|
||||
setLogin(l);
|
||||
}
|
||||
var lx = list.concat();
|
||||
lx.map(i=>i.visible =false);
|
||||
if(flag){
|
||||
lx[index].visible = flag;
|
||||
}
|
||||
lx.splice();
|
||||
setList(lx);
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="halfs">
|
||||
<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" onMouseLeave={()=>setVisibleFunc(false)}>
|
||||
{
|
||||
total > 0 ?
|
||||
list.map((item,key)=>{
|
||||
return(
|
||||
<Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="top">
|
||||
<Link key={key} to={`/users/${item.login}`}>
|
||||
<img src={getImageUrl(`/${item.image_url}`)} alt="" onMouseOver={()=>setVisibleFunc(true,item.login,key)}/>
|
||||
</Link>
|
||||
</Popover>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Contributors;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import React from 'react';
|
||||
import { AlignCenter } from '../layout';
|
||||
import { Modal , Button } from 'antd';
|
||||
import './Index.scss';
|
||||
|
||||
function DeleteBox({
|
||||
visible ,
|
||||
onCancel ,
|
||||
onSuccess ,
|
||||
title ,
|
||||
subTitle,
|
||||
content
|
||||
}) {
|
||||
return(
|
||||
<Modal
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
title={title}
|
||||
width="600px"
|
||||
className="deleteBox"
|
||||
footer={
|
||||
<div>
|
||||
<Button size={'large'} onClick={onCancel}>取消</Button>
|
||||
<Button type={"danger"} size={"large"} onClick={onSuccess}>确认删除</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="desc">
|
||||
<AlignCenter className="descMain"><i className="iconfont icon-shanchu_tc_icon mr10"></i>{content}</AlignCenter>
|
||||
<p>{subTitle}</p>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default DeleteBox;
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
.deleteBox{
|
||||
.ant-modal-header{
|
||||
background-color: #f8f8f8;
|
||||
border-bottom: none;
|
||||
.ant-modal-title{
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding:30px 50px;
|
||||
p{
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color:#666;
|
||||
word-break: break-all;
|
||||
}
|
||||
.desc{
|
||||
.descMain{
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
i{
|
||||
font-size: 38px!important;
|
||||
color:#DF0002
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-modal-footer{
|
||||
border-top: none;
|
||||
text-align: center;
|
||||
padding-bottom: 40px;
|
||||
button{
|
||||
width: 120px;
|
||||
margin:0px 20px;
|
||||
&.ant-btn-danger{
|
||||
background-color: #fff;
|
||||
color: #DF0002;
|
||||
border-color: #D0D0D0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Drawer , Tree , Spin } from 'antd';
|
||||
import './Component.scss';
|
||||
import axios from 'axios';
|
||||
const { TreeNode , DirectoryTree } = Tree;
|
||||
|
||||
function turnbar(str){
|
||||
if(str && str.length>0 && str.indexOf("/")>-1){
|
||||
return str.replaceAll('/','%2F');
|
||||
}
|
||||
return str;
|
||||
}
|
||||
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();
|
||||
let value = turnbar(branch);
|
||||
history.push(`/projects/${owner}/${projectsId}/tree/${value}/${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;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.ant-modal-mask{
|
||||
z-index: 1001;
|
||||
}
|
||||
.ant-modal-wrap{
|
||||
z-index: 1002;
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import React , {forwardRef, useEffect} from 'react';
|
||||
import { Modal , Form , Input , Button } from 'antd';
|
||||
import './EAccount.scss';
|
||||
|
||||
function EducoderAccount({form , visible , onOk , email}){
|
||||
const { getFieldDecorator, validateFields , setFieldsValue } = form;
|
||||
|
||||
useEffect(()=>{
|
||||
if(email){
|
||||
setFieldsValue({email})
|
||||
}
|
||||
},[email])
|
||||
|
||||
function onSure(){
|
||||
validateFields((error,values)=>{
|
||||
if(!error){
|
||||
onOk(values);
|
||||
}
|
||||
})
|
||||
}
|
||||
const layout = {
|
||||
labelCol: { span: 5 },
|
||||
wrapperCol: { span: 18 },
|
||||
};
|
||||
return(
|
||||
<Modal
|
||||
visible={visible}
|
||||
title="提示"
|
||||
width="500px"
|
||||
closable={false}
|
||||
footer={
|
||||
<Button type="primary" onClick={onSure}>确定</Button>
|
||||
}
|
||||
centered
|
||||
>
|
||||
<div>
|
||||
<p className="mb15 edu-txt-center" style={{maxWidth:"350px",margin:"0px auto"}}>
|
||||
为确保您能正常使用平台功能，请确认以下信息:
|
||||
</p>
|
||||
<Form {...layout}>
|
||||
<Form.Item label="邮箱">
|
||||
{getFieldDecorator("email",{
|
||||
rules:[{required:true,message:"请输入邮箱账号"}]
|
||||
})(
|
||||
<Input placeholder="请输入您的邮箱账号" width="220px"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="密码">
|
||||
{getFieldDecorator("password",{
|
||||
rules:[{required:true,message:"请输入邮箱密码"}]
|
||||
})(
|
||||
<Input.Password placeholder="请输入您的邮箱密码" width="220px"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default Form.create()(forwardRef(EducoderAccount));
|
||||
|
|
@ -5,7 +5,7 @@ import './Component.scss';
|
|||
export default (()=>{
|
||||
return(
|
||||
<div className="handleBox">
|
||||
<a href="https://forum.trustie.net/forums/3075/detail" target="_blank" >
|
||||
<a href="https://www.trustie.net/forums/82/memos/3075" target="_blank" >
|
||||
<img src={Handbook} alt=""/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
import React, { useState } from "react";
|
||||
import { Input ,notification} from "antd";
|
||||
|
||||
const { Search } = Input;
|
||||
export default ({history}) => {
|
||||
const [openSearch, setOpenSearch] = useState(false);
|
||||
|
||||
function onGlobalSearch(value) {
|
||||
history.push('/search?value=' + value);
|
||||
// window.location.href = `search?value=` + value;
|
||||
// history.push({
|
||||
// pathname:'/search',
|
||||
// state:value
|
||||
// })
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
openSearch ?
|
||||
<div
|
||||
onBlur={() => {
|
||||
setTimeout(() => {
|
||||
setOpenSearch(false)
|
||||
}, 500)
|
||||
}}
|
||||
>
|
||||
<Search placeholder="请输入搜索关键字"
|
||||
className={`search-input mr20`}
|
||||
onSearch={onGlobalSearch}
|
||||
autoFocus={true}
|
||||
style={{width:'260px'}}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<i className="iconfont icon-sousuo font-18 color-grey-6 ml30" onClick={() => {
|
||||
setOpenSearch(true)
|
||||
}} />
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
};
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
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-items:center;
|
||||
align-item:center;
|
||||
margin-left:30px;
|
||||
padding:0px 12px;
|
||||
border-radius:13px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
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%;
|
||||
|
|
@ -32,8 +28,26 @@ const I = styled.i`{
|
|||
font-size:13px!important;
|
||||
color:#60B25E;
|
||||
margin-right:2px;
|
||||
height:17px;
|
||||
line-height:17px;
|
||||
}`
|
||||
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;
|
||||
}`
|
||||
const Div = styled.div`{
|
||||
margin-bottom: 18px;
|
||||
|
|
@ -42,18 +56,17 @@ const Div = styled.div`{
|
|||
align-items: center;
|
||||
border:1px solid #eee;
|
||||
}`
|
||||
export default (({ user , img, name, time, focusStatus, is_current_user, login , successFunc }) => {
|
||||
return (
|
||||
export default (({img,name,time, focusStatus})=>{
|
||||
return(
|
||||
<Div>
|
||||
<Link to={`/users/${user && user.login}`}><Img src={getImageUrl(`/${img}`)} /></Link>
|
||||
<Img src={img}/>
|
||||
<div className="m-infos">
|
||||
<Link to={`/users/${user && user.login}`}><Name>{name}</Name></Link>
|
||||
<Name>{name}</Name>
|
||||
<Time><I className="iconfont icon-shijian"></I>加入时间:{time}</Time>
|
||||
{
|
||||
is_current_user ?
|
||||
<Button type="default">当前用户</Button>
|
||||
:
|
||||
<FocusButton is_watch={focusStatus} id={login} successFunc={successFunc}/>
|
||||
focusStatus ?
|
||||
<FocusBtn><Ifocused className="iconfont icon-shixing"></Ifocused>已关注</FocusBtn> :
|
||||
<FocusBtn><Ifocus className="iconfont icon-kongxing"></Ifocus>关注</FocusBtn>
|
||||
}
|
||||
</div>
|
||||
</Div>
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
import React, {useEffect, useRef, useState} from 'react';
|
||||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
|
||||
import './Component.scss';
|
||||
|
||||
function Monaco(props) {
|
||||
const {
|
||||
style = { // dom节点样式
|
||||
height: '400px',
|
||||
},
|
||||
value = '', // 代码文本
|
||||
onChange = () => { // 改变的事件
|
||||
},
|
||||
fontSize = 14, // 代码字体大小
|
||||
monacoOptions = {
|
||||
scrollBeyondLastLine: false,
|
||||
lineNumbers: "off",
|
||||
wordWrap: true,
|
||||
overviewRulerBorder: true,
|
||||
lineHeight: 24,
|
||||
readOnly:true
|
||||
}, // monaco 自定义属性
|
||||
language = 'html', // 语言 支持 js ts sql css json html等
|
||||
} = props;
|
||||
const editOrRef = useRef();
|
||||
const ThisEditor = useRef();
|
||||
useEffect(() => {
|
||||
ThisEditor.current = monaco.editor.create(editOrRef.current, {
|
||||
value: value || '',
|
||||
language,
|
||||
theme: "vs-grey",
|
||||
fontSize: fontSize + 'px',
|
||||
minimap: { // 关闭代码缩略图
|
||||
enabled: false,
|
||||
},
|
||||
...monacoOptions,
|
||||
});
|
||||
|
||||
ThisEditor.current.onDidChangeModelContent((e) => {
|
||||
let newValue = ThisEditor.current.getValue();
|
||||
onChange(newValue);
|
||||
});
|
||||
return () => {
|
||||
ThisEditor.current.dispose();
|
||||
ThisEditor.current = undefined; // 清除编辑器对象
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (ThisEditor.current) {
|
||||
ThisEditor.current.updateOptions({
|
||||
fontSize: fontSize + 'px',
|
||||
})
|
||||
}
|
||||
}, [fontSize]);
|
||||
|
||||
return (
|
||||
<div style={style} ref={editOrRef}>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Monaco;
|
||||
|
|
@ -11,7 +11,6 @@ function PasswordAuthority({ authorityValBox , successFunc , cancelFunc }){
|
|||
|
||||
// 取消授权-登录密码的输入
|
||||
function cancelAuthority(){
|
||||
setAuthorityVal(undefined);
|
||||
cancelFunc();
|
||||
}
|
||||
// 确认授权
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
import React from 'react';
|
||||
import { AlignCenter , AlignTop , FlexAJ } from '../Component/layout';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function Releases({owner,projectsId,releaseVersions , baseOperate , projectType}){
|
||||
|
||||
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) || projectType ===2 ?
|
||||
<Link className="font-12 color-grey-9" to={`/projects/${owner}/${projectsId}/releases`}>全部</Link>
|
||||
:
|
||||
baseOperate && <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(
|
||||
key === 0 &&<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`}>{item.name}</Link>
|
||||
<span className="font-12 laterest ml5">最新</span>
|
||||
</p>
|
||||
<p className="color-grey-9 font-13">{item.created_at}</p>
|
||||
</div>
|
||||
</AlignTop>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Releases;
|
||||
|
|
@ -2,15 +2,13 @@ import React from "react";
|
|||
import { Input } from "antd";
|
||||
|
||||
const { Search } = Input;
|
||||
export default ({ placeholder , onSearch , onChange }) => {
|
||||
export default ({ placeholder , onSearch }) => {
|
||||
return (
|
||||
<Search
|
||||
allowClear
|
||||
placeholder={placeholder}
|
||||
enterButton={'搜索'}
|
||||
onSearch={onSearch}
|
||||
width="300px"
|
||||
onChange={onChange}
|
||||
></Search>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,53 +2,52 @@ import React , { useState , useEffect } from 'react';
|
|||
import { AutoComplete } from 'antd';
|
||||
import { getImageUrl } from "educoder";
|
||||
import axios from 'axios';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
|
||||
export default ({ getUser , placeholder, width ,value })=>{
|
||||
const [ source , setSource ] = useState(undefined);
|
||||
export default ({ getUser })=>{
|
||||
const [ searchKey , setSearchKey ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
if(!value){
|
||||
setSearchKey(undefined);
|
||||
}
|
||||
},[value])
|
||||
|
||||
useEffect(()=>{
|
||||
getUserList();
|
||||
},[searchKey])
|
||||
const [ userDataSource , setUserDataSource ] = useState(undefined);
|
||||
|
||||
function getUserList(e){
|
||||
const url = `/users/list.json`;
|
||||
axios.get(url, {
|
||||
params: {
|
||||
search: searchKey,
|
||||
search: e,
|
||||
},
|
||||
}).then((result) => {
|
||||
})
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
sourceOptions(result.data.users);
|
||||
setUserDataSource(result.data.users);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
function changeInputUser(value){
|
||||
setSearchKey(value);
|
||||
getUserList(value);
|
||||
}
|
||||
|
||||
function sourceOptions(userDataSource){
|
||||
const s = userDataSource && userDataSource.map((item, key) => {
|
||||
function selectInputUser(id, option){
|
||||
setSearchKey(option.props.searchValue);
|
||||
getUserList(option.props.searchValue);
|
||||
getUser && getUser(id);
|
||||
}
|
||||
const source =
|
||||
userDataSource && userDataSource.map((item, key) => {
|
||||
return (
|
||||
<Option
|
||||
key={key}
|
||||
value={`${item.user_id}`}
|
||||
login={`${item.login}`}
|
||||
name={item.username}
|
||||
searchValue={`${item.username}`}
|
||||
>
|
||||
<img
|
||||
className="user_img radius"
|
||||
width="28"
|
||||
height="28"
|
||||
src={getImageUrl(`/${item && item.image_url}`)}
|
||||
src={getImageUrl(`images/${item && item.image_url}`)}
|
||||
alt=""
|
||||
/>
|
||||
<span className="ml10" style={{ "vertical-align": "middle" }}>
|
||||
|
|
@ -58,31 +57,14 @@ export default ({ getUser , placeholder, width ,value })=>{
|
|||
</Option>
|
||||
);
|
||||
});
|
||||
setSource(s);
|
||||
}
|
||||
|
||||
function changeInputUser(e){
|
||||
setSearchKey(e);
|
||||
};
|
||||
|
||||
// 选择用户
|
||||
function selectInputUser(e, option){
|
||||
setSearchKey(option.props.name);
|
||||
getUser(option.props.login);
|
||||
};
|
||||
|
||||
return(
|
||||
<div className="addPanel">
|
||||
<AutoComplete
|
||||
getPopupContainer={trigger => trigger.parentNode}
|
||||
dataSource={source}
|
||||
value={searchKey}
|
||||
style={{ width: width || 300 }}
|
||||
onChange={changeInputUser}
|
||||
onSelect={selectInputUser}
|
||||
placeholder={placeholder || "搜索需要添加的用户..."}
|
||||
allowClear
|
||||
/>
|
||||
</div>
|
||||
<AutoComplete
|
||||
dataSource={source}
|
||||
value={searchKey}
|
||||
style={{ width: 300 }}
|
||||
onChange={changeInputUser}
|
||||
onSelect={selectInputUser}
|
||||
placeholder="搜索需要添加的用户..."
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Popover , Tooltip } from 'antd';
|
||||
import './Component.scss';
|
||||
import axios from 'axios';
|
||||
import ShareModal from './SiderBarShareModal';
|
||||
|
||||
const $ = window.$;
|
||||
|
||||
$(window).scroll(function () {
|
||||
if ($(".gotop").length > 0) {
|
||||
if ($(document).scrollTop() > 0) {
|
||||
$(".-task-sidebar .gotop").show();
|
||||
$(".gotop").click(function () {
|
||||
$("html,body").scrollTop(0);
|
||||
});
|
||||
}
|
||||
if ($(document).scrollTop() === 0) {
|
||||
$(".-task-sidebar .gotop").hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function SiderBar() {
|
||||
const [ data , setData ] = useState([]);
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
|
||||
useEffect(()=>{
|
||||
getFAQ();
|
||||
},[])
|
||||
|
||||
function getFAQ(){
|
||||
const url = `/faqs.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
setData(result.data);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
function content(list){
|
||||
return <div>
|
||||
<p className="titlecontent">帮助</p>
|
||||
<ul className="faqUl">
|
||||
{
|
||||
list && list.map((i,k)=>{
|
||||
return(
|
||||
<li key={i.question+k}><a href={`${i.url}`} title={i.question} target="_blank">{i.question}</a></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
|
||||
function shareContent(){
|
||||
return <div>
|
||||
<ul className="shareUl">
|
||||
<p className="titlecontent">分享到</p>
|
||||
<li onClick={()=>setVisible(true)}><i className="iconfont icon-weixin2" style={{color:"#62b900"}}></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<div className={"-task-sidebar"} >
|
||||
<ShareModal visible={visible} urlValue={window.location.href} onCancel={()=>setVisible(false)}/>
|
||||
{
|
||||
data && data.length > 0 && (data[0] && data[0].question) ?
|
||||
<Popover content={content(data)} overlayClassName="helpBox" placement={"left"}>
|
||||
<div className="feedback">
|
||||
<i className="iconfont icon-bangzhu font-22"></i>
|
||||
</div>
|
||||
</Popover>
|
||||
:""
|
||||
}
|
||||
{/* <div className="scan pr" title="微信扫一扫">
|
||||
<span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
|
||||
</div>*/}
|
||||
<Popover content={shareContent()} overlayClassName="helpBox shareContent" placement={"left"}>
|
||||
<div className="consult">
|
||||
<i className="iconfont icon-fenxiang1"></i>
|
||||
</div>
|
||||
</Popover>
|
||||
<div className="gotop">
|
||||
<Tooltip title="返回顶部" placement={"right"}>
|
||||
<a><i className="iconfont icon-huidaodingbu1"></i></a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SiderBar;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Modal } from 'antd';
|
||||
import QRCode from 'qrcode.react';
|
||||
|
||||
function SiderBarShareModal({visible,urlValue,onCancel}) {
|
||||
return(
|
||||
<Modal
|
||||
title={"分享到微信"}
|
||||
visible={visible}
|
||||
width="500px"
|
||||
closable={true}
|
||||
footer={false}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<div style={{textAlign:"center"}}>
|
||||
{urlValue &&<QRCode
|
||||
value={urlValue}
|
||||
size={200}
|
||||
fgColor="#000000"
|
||||
style={{margin:"20px"}}
|
||||
/>}
|
||||
<p>打开微信“扫一扫”,点击右上角菜单，即可将网页分享至朋友圈</p>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default SiderBarShareModal;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export default ({ url , name , column , id , login })=>{
|
||||
|
||||
export default ({ url , name , column })=>{
|
||||
const Img = styled.span`
|
||||
display:flex;
|
||||
${column && "flex-direction: column;text-align:center;"}
|
||||
|
|
@ -19,16 +19,8 @@ export default ({ url , name , column , id , login })=>{
|
|||
}
|
||||
`;
|
||||
return(
|
||||
id?
|
||||
<Link to={`/users/${login}`}>
|
||||
<Img>
|
||||
{ url && <img src={url} alt=""/> }
|
||||
<span>{name}</span>
|
||||
</Img>
|
||||
</Link>
|
||||
:
|
||||
<Img>
|
||||
{ url && <img src={url} alt=""/> }
|
||||
<img src={url} alt=""/>
|
||||
<span>{name}</span>
|
||||
</Img>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -24,38 +24,18 @@ export const AlignCenter = styled.div`{
|
|||
display:flex;
|
||||
align-items: center;
|
||||
}`
|
||||
export const AlignTop = styled.div`{
|
||||
display:flex;
|
||||
align-items: flex-start;
|
||||
}`
|
||||
export const AlignAJBottom = styled.div`{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}`
|
||||
// 左右结构
|
||||
export const Box = styled.div`{
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
}`
|
||||
export const LongWidth = styled.div`{
|
||||
flex:1;
|
||||
width:0;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
align-item:flex-start;
|
||||
}`
|
||||
export const Long = styled.div`{
|
||||
width:78%;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
export const ShortWidth = styled.div`{
|
||||
width:300px;
|
||||
width:72%;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
export const Short = styled.div`{
|
||||
flex:1;
|
||||
width:28%;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
|
|
@ -81,24 +61,22 @@ export const Redline = styled.a`{
|
|||
line-height:28px;
|
||||
border-radius:2px;
|
||||
border:1px solid #F73030;
|
||||
color:${props => (props.bold ? "#fff" : "#F73030")} !important;
|
||||
color:#F73030;
|
||||
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:${props => (props.bold ? "#fff" : "#28BD6C")} !important;
|
||||
color:#28BD6C;
|
||||
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;
|
||||
|
|
@ -116,7 +94,7 @@ export const Blueback = styled.a`{
|
|||
line-height:30px;
|
||||
border-radius:2px;
|
||||
background-color:rgba(80,145,255,1);
|
||||
color:#fff!important;
|
||||
color:#fff;
|
||||
padding:0px 12px;
|
||||
display:inline-block;
|
||||
min-width:80px;
|
||||
|
|
@ -176,9 +154,3 @@ export const Content = styled.div`{
|
|||
background-color:#fff;
|
||||
justify-content: center;
|
||||
}`
|
||||
export const GroupProjectBackgroup = styled.div`{
|
||||
background:#fafafa;
|
||||
padding:20px 30px;
|
||||
width:100%;
|
||||
}`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import React, { forwardRef, useCallback, useState , useEffect } from "react";
|
||||
import activate from "../Images/activate.png";
|
||||
import { AlignCenter, Blueback } from "../Component/layout";
|
||||
import { Blueback , AlignCenter } from "../Component/layout";
|
||||
import PasswordAuthority from "../Component/PasswordAuthority";
|
||||
import styled from "styled-components";
|
||||
import { Form, Input , Spin , Button } from "antd";
|
||||
import ServiceModal from './ServiceModal';
|
||||
import { Form, Input , Spin , Modal } from "antd";
|
||||
import axios from "axios";
|
||||
|
||||
const P = styled.p`
|
||||
{
|
||||
width: 230px;
|
||||
width: 200px;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
|
@ -21,23 +20,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(0);
|
||||
|
||||
const [step, setStep] = useState(undefined);
|
||||
// step大于1时：为true，不能再修改服务器信息
|
||||
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.projectDetail && props.projectDetail.author && props.projectDetail.author.login;
|
||||
|
||||
const AuthorLogin = props.author && props.author.login;
|
||||
const CurrentLogin = props.current_user && props.current_user.login;
|
||||
|
||||
useEffect(()=>{
|
||||
if(CurrentLogin === AuthorLogin){
|
||||
auth('get');
|
||||
|
|
@ -52,12 +48,12 @@ 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});
|
||||
}
|
||||
}).catch(error=>{
|
||||
setIsSpining(false);
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
|
@ -77,8 +73,8 @@ function About(props, ref) {
|
|||
function goStep() {
|
||||
validateFields((error, values) => {
|
||||
if (!error) {
|
||||
if(disabled){
|
||||
setStep(1);
|
||||
if(step > 0){
|
||||
setAuthorityValBox(true);
|
||||
}else{
|
||||
setIsSpining(true);
|
||||
const url = `/${owner}/${projectsId}/cloud_accounts.json`;
|
||||
|
|
@ -87,6 +83,7 @@ function About(props, ref) {
|
|||
if (result && result.data.redirect_url) {
|
||||
props.showNotification("服务器信息配置完成！");
|
||||
setStep(1);
|
||||
setAuthorityValBox(true);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -98,50 +95,6 @@ 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);
|
||||
|
|
@ -159,89 +112,66 @@ 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 ?
|
||||
<div className="noOperation">DevOps开启功能暂未对项目创建者以外的角色开放，可以联系项目创建者进行开启，开启后便可查看构建信息。</div>:""
|
||||
}
|
||||
<a href={"https://forum.trustie.net/forums/3110/detail"} target="_blank" style={{ color: "#5091FF"}}>
|
||||
了解什么是DevOps？
|
||||
</a>
|
||||
<a href={"https://forum.trustie.net/forums/3080/detail"} target="_blank" style={{ color: "#5091FF"}}>
|
||||
如何使用DevOps？
|
||||
了解什么是DevOps？
|
||||
</a>
|
||||
{
|
||||
AuthorLogin === CurrentLogin ?
|
||||
<React.Fragment>
|
||||
{
|
||||
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 ?
|
||||
{ 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 &&
|
||||
<div style={{textAlign:'center',marginTop:"20px"}}>
|
||||
<Blueback onClick={startActive} className="mt20">开始激活</Blueback>
|
||||
</div>:""
|
||||
</div>
|
||||
}
|
||||
</React.Fragment>
|
||||
:""
|
||||
|
|
|
|||
|
|
@ -1,166 +1,117 @@
|
|||
import React , { useState , useEffect } from 'react';
|
||||
import { Spin , Pagination } from 'antd';
|
||||
import { Spin } from 'antd';
|
||||
import { Blueback } from '../Component/layout';
|
||||
import List from './Dispose/List';
|
||||
import Head from './Dispose/head';
|
||||
import Editor from "react-monaco-editor";
|
||||
import Modals from './DisposeModal';
|
||||
import FileLanguage from '../Component/OpsFileLanguage';
|
||||
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 [ updateInfo , setUpdateInfo ] = useState(undefined);
|
||||
const [ list , setList ] = useState(undefined);
|
||||
const [ permission , setPermission ] = useState(undefined);
|
||||
const [ spining , setSpining ] = useState(true);
|
||||
const [ info , setInfo ] = useState('.trustie-pipeline.yml');
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
const [ page , setPage ] = useState(1);
|
||||
const [ totalCount , setTotalCount ] = useState(0);
|
||||
const [ branchList , setBranchList ] =useState(undefined);
|
||||
const [ ymlValue , setYmlValue ] = useState("");
|
||||
const [ sha , setSha ] = useState(undefined);
|
||||
const [ fileLanguage , setFileLanguage ] = useState(undefined);
|
||||
const [ first , setFirst ] = useState(false);
|
||||
|
||||
|
||||
const projectDetail = props.projectDetail;
|
||||
const current_user = props.current_user;
|
||||
let projectsId = props.match.params.projectsId;
|
||||
let owner = props.match.params.owner;
|
||||
|
||||
// 获取用户的身份角色
|
||||
useEffect(()=>{
|
||||
if(projectDetail){
|
||||
setPermission(props.projectDetail.permission);
|
||||
}
|
||||
},[projectDetail])
|
||||
|
||||
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);})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
Init();
|
||||
},[page])
|
||||
|
||||
useEffect(()=>{
|
||||
if(owner && projectsId){
|
||||
const url = `/${owner}/${projectsId}/branches.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
setBranchList(result.data);
|
||||
if(projectsId){
|
||||
const url = `/${owner}/${projectsId}/get_trustie_pipeline.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
project_id:projectsId
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}).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);
|
||||
})
|
||||
}
|
||||
},[owner,projectsId])
|
||||
},[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);
|
||||
// 修改文件内容
|
||||
function changeEditor(value){
|
||||
setYmlValue(value);
|
||||
}
|
||||
|
||||
// 切换语言
|
||||
function select_language(value,array){
|
||||
setFileLanguage(value);
|
||||
setYmlValue( array && array.content);
|
||||
}
|
||||
|
||||
// 确定提交
|
||||
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);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}else{
|
||||
setUpdateInfo(undefined);
|
||||
url = `/${owner}/${projectsId}/create_file.json`;
|
||||
axios.post(url,params).then(result=>{
|
||||
if(result){
|
||||
setVisible(true);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
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 suresubmit(){
|
||||
setVisible(false);
|
||||
props.history.push(`/projects/${owner}/${projectsId}/devops/list`);
|
||||
}
|
||||
|
||||
// 删除
|
||||
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}>
|
||||
<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>
|
||||
<Modals visible={visible} closeFunc={(flag)=>setVisible(flag)} sureFunc={suresubmit}></Modals>
|
||||
<p>编程语言：</p>
|
||||
|
||||
<div className="mt20 mb20">
|
||||
<FileLanguage language={fileLanguage} select_language={select_language}/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Table , Popconfirm } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// const STATUS = {
|
||||
// running:"运行中",
|
||||
// failure:"未通过",
|
||||
// error:"未通过",
|
||||
// success:"已通过",
|
||||
// killed:"已撤销",
|
||||
// pending:"准备中"
|
||||
// }
|
||||
function turnbar(str){
|
||||
if(str && str.length>0 && str.indexOf("/")>-1){
|
||||
return str.replaceAll('/','%2F');
|
||||
}
|
||||
return str;
|
||||
}
|
||||
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)=>{
|
||||
let v = turnbar(item.branch);
|
||||
return(
|
||||
<Link to={`/projects/${owner}/${projectsId}/tree/${v}/${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;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
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"}} dropdownClassName="chooseCon" 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} dropdownClassName="chooseCon" 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;
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
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 , { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { WhiteBack } from '../Component/layout';
|
||||
import './ops.scss';
|
||||
|
||||
|
|
@ -10,65 +10,27 @@ const About = Loadable({
|
|||
loader: () => import('./About'),
|
||||
loading: Loading,
|
||||
})
|
||||
const New = Loadable({
|
||||
loader: () => import('./disposePipeline'),
|
||||
const Infos = Loadable({
|
||||
loader: () => import('./Infos'),
|
||||
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/:disposeId"
|
||||
render={
|
||||
(p) => (<New {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops/params"
|
||||
render={
|
||||
(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}/>)
|
||||
() => (<Infos {...props} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops/list/:branch"
|
||||
<Route path="/projects/:owner/:projectsId/devops/list"
|
||||
render={
|
||||
(p) => (<Stucture {...props} {...p}/>)
|
||||
() => (<Infos {...props} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops"
|
||||
render={
|
||||
(p) => (<About {...props} {...p}/>)
|
||||
() => (<About {...props} />)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import React , { useEffect , useState , useRef } 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';
|
||||
|
||||
|
|
@ -10,11 +11,22 @@ 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){
|
||||
|
|
@ -22,14 +34,23 @@ 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`}>工作流配置</Link>}
|
||||
{ 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>}
|
||||
</Banner>
|
||||
<Div>
|
||||
<Dispost {...props}/>
|
||||
{ menu === true && <Structure {...props} wrappedComponentRef={(form) => childRef.current = form} ref={childRef}/> }
|
||||
{ menu === false && permission !=="Reporter" && <Dispost {...props}/> }
|
||||
</Div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,119 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
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));
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.ant-form-explain{
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
}
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
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));
|
||||
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Spin , Menu } from "antd";
|
||||
import { Spin } from "antd";
|
||||
import { FlexAJ, AlignCenter } from "../Component/layout";
|
||||
import axios from "axios";
|
||||
import CodeSSH from './ssh/Index';
|
||||
|
||||
export default ({
|
||||
data,
|
||||
|
|
@ -18,8 +17,6 @@ export default ({
|
|||
const [spining, setSpining] = useState(true);
|
||||
const [stage, setStage] = useState(undefined);
|
||||
const [step, setStep] = useState(undefined);
|
||||
const [nav, setNav] = useState("0");
|
||||
|
||||
useEffect(() => {
|
||||
setSpining(rightSpin);
|
||||
}, [rightSpin]);
|
||||
|
|
@ -38,7 +35,6 @@ export default ({
|
|||
: p[0];
|
||||
|
||||
setStep(sub);
|
||||
setNav("0");
|
||||
if (sub && sub.status !== "skipped") {
|
||||
getStep(pre.number, sub.number);
|
||||
}
|
||||
|
|
@ -69,55 +65,43 @@ export default ({
|
|||
}
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
{/* <Menu className="devopsNav" onClick={(e)=>{setNav(e.key)}} selectedKeys={[nav]} mode="horizontal">
|
||||
<Menu.Item key={'0'} value="0">开发流水线</Menu.Item>
|
||||
<Menu.Item key={'1'} value="1">命令行</Menu.Item>
|
||||
</Menu> */}
|
||||
{
|
||||
nav === "0" &&
|
||||
<Spin spinning={spining}>
|
||||
<div className="rightMainContent">
|
||||
{data && data.status !== "error" ? (
|
||||
<div>
|
||||
<FlexAJ className="items">
|
||||
<span>{step && step.name}</span>
|
||||
<AlignCenter>
|
||||
{step && step.duration_time}
|
||||
<i className="iconfont icon-sanjiaoxing-down"></i>
|
||||
</AlignCenter>
|
||||
</FlexAJ>
|
||||
<div>
|
||||
{coders && coders.length > 0 ? (
|
||||
coders.map((item, key) => {
|
||||
return (
|
||||
<div className="opsDetailOut">
|
||||
<span>{key + 1}</span>
|
||||
<p>{item.out}</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : empty ? (
|
||||
<Spin spinning={spining}>
|
||||
<div className="rightMainContent">
|
||||
{data && data.status !== "error" ? (
|
||||
<div>
|
||||
<FlexAJ className="items">
|
||||
<span>{step && step.name}</span>
|
||||
<AlignCenter>
|
||||
{step && step.duration_time}
|
||||
<i className="iconfont icon-sanjiaoxing-down"></i>
|
||||
</AlignCenter>
|
||||
</FlexAJ>
|
||||
<div>
|
||||
{coders && coders.length > 0 ? (
|
||||
coders.map((item, key) => {
|
||||
return (
|
||||
<div className="opsDetailOut">
|
||||
<span>1</span>
|
||||
<p>
|
||||
{stage && stage.name} – {step && step.name}: Skipped
|
||||
</p>
|
||||
<span>{key + 1}</span>
|
||||
<p>{item.out}</p>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
);
|
||||
})
|
||||
) : empty ? (
|
||||
<div className="opsDetailOut">
|
||||
<span>1</span>
|
||||
<p>
|
||||
{stage && stage.name} – {step && step.name}: Skipped
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ color: "red" }}>error:{data && data.error}</div>
|
||||
)}
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
}
|
||||
{
|
||||
nav === "1" && <CodeSSH />
|
||||
}
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<div style={{ color: "red" }}>error:{data && data.error}</div>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
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,16 +1,10 @@
|
|||
import React, { useState, useEffect , useImperativeHandle ,forwardRef } from "react";
|
||||
import { FlexAJ, AlignCenter , Banner } from "../Component/layout";
|
||||
import { FlexAJ, AlignCenter } from "../Component/layout";
|
||||
import { Table, Pagination, Popconfirm } from "antd";
|
||||
import { truncateCommitId } from "../common/util";
|
||||
import { getImageUrl } from 'educoder';
|
||||
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" },
|
||||
|
|
@ -28,7 +22,6 @@ 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, () => ({
|
||||
|
|
@ -42,7 +35,7 @@ function Structure(props,ref){
|
|||
if (projectsId) {
|
||||
Init();
|
||||
}
|
||||
}, [page]);
|
||||
}, []);
|
||||
|
||||
let current_user = props.current_user;
|
||||
function Init(status) {
|
||||
|
|
@ -50,7 +43,7 @@ function Structure(props,ref){
|
|||
axios.get(url,{
|
||||
params:{
|
||||
search:status,
|
||||
page,limit:LIMIT,branch
|
||||
page,limit:LIMIT
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result && result.data) {
|
||||
|
|
@ -58,7 +51,6 @@ function Structure(props,ref){
|
|||
return {
|
||||
...item,
|
||||
author:item.author && item.author.name,
|
||||
image_url:item.author && item.author.image_url,
|
||||
message: {
|
||||
branch: item.branch_target,
|
||||
message: item.message,
|
||||
|
|
@ -188,7 +180,7 @@ function Structure(props,ref){
|
|||
<i className="iconfont icon-weitongguo"></i>已撤销
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
case 'pending':
|
||||
return (
|
||||
<span className="statusTag Preparing">
|
||||
<i className="iconfont icon-zhunbeizhong"></i>准备中
|
||||
|
|
@ -245,7 +237,7 @@ function Structure(props,ref){
|
|||
{meg.sha && <span className="color-orange">{meg.sha}</span>}
|
||||
</div>
|
||||
<AlignCenter>
|
||||
<img style={{borderRadius:"50%",marginRight:"10px",width:"25px",height:"25px"}} alt="" src={`${item.image_url && getImageUrl(`/${item.image_url}`)}`} />
|
||||
<img style={{borderRadius:"50%",marginRight:"10px",width:"25px",height:"25px"}} src={`${current_user && getUrl(`/images/${current_user.image_url}`)}`} />
|
||||
<div className="task-hide ml5" style={{ maxWidth: "300px" }}>
|
||||
{meg.message}
|
||||
</div>
|
||||
|
|
@ -286,45 +278,42 @@ function Structure(props,ref){
|
|||
},
|
||||
];
|
||||
return (
|
||||
<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 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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,317 +0,0 @@
|
|||
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,7 +10,6 @@
|
|||
padding:60px 0px;
|
||||
}
|
||||
.disposePanel{
|
||||
border:1px solid #eee;
|
||||
.language{
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -82,7 +81,48 @@
|
|||
.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{
|
||||
|
|
@ -194,18 +234,6 @@
|
|||
&.rightSection{
|
||||
width:100%;
|
||||
background-color: #081930;
|
||||
.devopsNav{
|
||||
background-color: #111c24;
|
||||
border-bottom: none;
|
||||
.ant-menu-item{
|
||||
color: #ccc;
|
||||
padding:0px;
|
||||
margin:0px 20px!important;
|
||||
}
|
||||
.ant-menu-item.ant-menu-item-selected{
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.rightMainContent{
|
||||
padding:24px 30px;
|
||||
height:100vh;
|
||||
|
|
@ -279,246 +307,3 @@
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
.noOperation{
|
||||
margin-bottom:20px;
|
||||
width:380px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chooseCon.ant-select-dropdown{
|
||||
z-index: 100001;
|
||||
}
|
||||
|
||||
.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/dispose`}
|
||||
to={`/projects/${owner}/${projectId}/devops/list`}
|
||||
>
|
||||
<i className="iconfont icon-yiguanbi font-15 mr5"></i>退出
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import XmlPanel from "./XmlPanel";
|
||||
import mediator from "./mediator";
|
||||
import axios from "axios";
|
||||
|
||||
// const defaulturl = `http://47.111.130.18:48088`;
|
||||
const defaultValue = {
|
||||
host: "106.75.231.63",
|
||||
port: "2021",
|
||||
ws_url: "wss://pre-webssh.educoder.net/ws",
|
||||
username: "root",
|
||||
secret: "Dron_123123",
|
||||
};
|
||||
function Index() {
|
||||
const [sshConfigData, setSshConfigData] = useState(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (!sshConfigData) {
|
||||
init();
|
||||
}
|
||||
setTimeout(() => {
|
||||
mediator.publish("create-socket", 1);
|
||||
}, 300);
|
||||
}, [sshConfigData]);
|
||||
|
||||
// 获取服务器连接信息
|
||||
function init() {
|
||||
const url = `/api/ci/pipelines/ssh_server.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
setSshConfigData({...result.data})
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
return (
|
||||
<XmlPanel
|
||||
sshConfigData={sshConfigData||{}}
|
||||
sid={1}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export default Index;
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import { Base64 } from 'js-base64';
|
||||
|
||||
import { Terminal } from 'xterm';
|
||||
import 'xterm/css/xterm.css';
|
||||
import mediator from './mediator';
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
|
||||
function getColsAndRows(width, height, term) {
|
||||
let w = term._core._renderService.dimensions.actualCellWidth || 9.5;
|
||||
let h = term._core._renderService.dimensions.actualCellHeight || 18;
|
||||
const rows = Math.floor(height / h);
|
||||
const cols = Math.floor(width / w);
|
||||
return [cols, rows];
|
||||
}
|
||||
|
||||
function onLayout(term, el) {
|
||||
const ro = new ResizeObserver(entries => {
|
||||
console.log(entries);
|
||||
for (let entry of entries) {
|
||||
if (entry.target.offsetHeight > 0 || entry.target.offsetWidth > 0) {
|
||||
const [cols, rows] = getColsAndRows(
|
||||
entry.target.offsetWidth,
|
||||
entry.target.offsetHeight,
|
||||
term,
|
||||
);
|
||||
console.log('cols, rows', cols, rows);
|
||||
term.resize(cols, rows);
|
||||
mediator.publish('ssh-xterm-resize', {
|
||||
columns: cols,
|
||||
rows: rows,
|
||||
width: entry.target.offsetWidth,
|
||||
height: entry.target.offsetHeight,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
ro.observe(el);
|
||||
return ro;
|
||||
}
|
||||
|
||||
const TimeTicket = 30000;
|
||||
|
||||
//建立 websockt 来交互
|
||||
//根据容器大小计算行数和列数并做到自适应
|
||||
//socket 与 term 需要分开初始化 因为socket 可能重置连接
|
||||
//mediator 监听消息，如果和id匹配，则建立连接，重置，或关闭连接
|
||||
|
||||
export default ({ sshConfigData, sid }) => {
|
||||
const [term, setTerm] = useState(null);
|
||||
|
||||
const { ws_url, password, port, secret } = sshConfigData;
|
||||
const el = useRef();
|
||||
const socket = useRef();
|
||||
const isFirstConnected = useRef(false);
|
||||
|
||||
//term init
|
||||
useEffect(() => {
|
||||
if (el.current && ws_url) {
|
||||
const term = new Terminal({ fontSize: 16, rendererType: 'dom' });
|
||||
term.open(el.current);
|
||||
|
||||
term.onData(data => {
|
||||
if (socket.current) {
|
||||
if (socket.current.readyState === 1) {
|
||||
socket.current.send(JSON.stringify({ tp: 'client', data: data }));
|
||||
mediator.publish('on-operating-ssh'); //有操作则自动延时
|
||||
} else {
|
||||
//断开连接后重连
|
||||
// socket.current = null
|
||||
// mediator.publish('create-socket', sid)
|
||||
}
|
||||
}
|
||||
});
|
||||
term.write('Connecting...');
|
||||
setTerm(term);
|
||||
const ro = onLayout(term, el.current);
|
||||
return () => {
|
||||
term.dispose();
|
||||
ro.unobserve(el.current);
|
||||
};
|
||||
}
|
||||
}, [ws_url, el.current]);
|
||||
|
||||
useEffect(() => {
|
||||
if (term && ws_url) {
|
||||
function createSocket() {
|
||||
const socketInstance = new WebSocket(ws_url);
|
||||
socket.current = socketInstance;
|
||||
|
||||
socketInstance.onopen = () => {
|
||||
let container = term.element.parentElement;
|
||||
if (container) {
|
||||
let width = container.offsetWidth;
|
||||
let height = container.offsetHeight;
|
||||
console.log('init', {
|
||||
tp: 'init',
|
||||
data: {
|
||||
...sshConfigData,
|
||||
secret: secret,
|
||||
width,
|
||||
height,
|
||||
rows: term.rows,
|
||||
columns: term.cols,
|
||||
},
|
||||
});
|
||||
socketInstance.send(
|
||||
JSON.stringify({
|
||||
tp: 'init',
|
||||
data: {
|
||||
...sshConfigData,
|
||||
secret: secret,
|
||||
width,
|
||||
height,
|
||||
rows: term.rows,
|
||||
columns: term.cols,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
term.focus();
|
||||
};
|
||||
socketInstance.onerror = error => {
|
||||
console.log(
|
||||
'------in socket error----',
|
||||
error,
|
||||
socketInstance,
|
||||
ws_url,
|
||||
);
|
||||
//连接报错后，重新请求资源
|
||||
// mediator.publish('on-recreate-socket')
|
||||
};
|
||||
socketInstance.onmessage = event => {
|
||||
if (!isFirstConnected.current) {
|
||||
term.write('\r');
|
||||
// term.focus()
|
||||
setTimeout(() => {
|
||||
// term.clear();
|
||||
}, 1000);
|
||||
}
|
||||
isFirstConnected.current = true;
|
||||
console.log('event:', event);
|
||||
|
||||
const data = Base64.decode(event.data.toString());
|
||||
let w = term._core._renderService.dimensions.actualCellWidth || 9.5;
|
||||
|
||||
console.log('data:', data, w, term);
|
||||
term.write(data);
|
||||
};
|
||||
|
||||
socketInstance.onclose = evt => {
|
||||
if (tid) {
|
||||
clearInterval(tid);
|
||||
}
|
||||
term.write('\r\nconnection closed');
|
||||
};
|
||||
}
|
||||
|
||||
const tid = setInterval(() => {
|
||||
if (socket.current) {
|
||||
socket.current.send(JSON.stringify({ tp: 'h' }));
|
||||
}
|
||||
}, TimeTicket);
|
||||
|
||||
const unSubCreate = mediator.subscribe('create-socket', id => {
|
||||
if (sid === id) {
|
||||
if (socket.current && socket.current.readyState === 1) {
|
||||
term.focus();
|
||||
} else {
|
||||
createSocket();
|
||||
}
|
||||
term.focus();
|
||||
}
|
||||
});
|
||||
|
||||
const unSubClose = mediator.subscribe('close-socket', id => {
|
||||
if (sid === id) {
|
||||
if (socket.current) {
|
||||
socket.current.close();
|
||||
isFirstConnected.current = false;
|
||||
term.clear();
|
||||
}
|
||||
socket.current = null;
|
||||
}
|
||||
});
|
||||
|
||||
const unSubResize = mediator.subscribe('ssh-xterm-resize', option => {
|
||||
if (socket.current && socket.current.readyState === 1) {
|
||||
socket.current.send(
|
||||
JSON.stringify({ tp: 'resize', data: { ...option } }),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const unSubAddTime = mediator.subscribe('ssh-add-connect-time', () => {
|
||||
if (socket.current && socket.current.readyState === 1) {
|
||||
socket.current.send(JSON.stringify({ tp: 'overtime' }));
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
unSubClose();
|
||||
unSubCreate();
|
||||
unSubResize();
|
||||
unSubAddTime();
|
||||
if (socket.current) {
|
||||
socket.current.close();
|
||||
isFirstConnected.current = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [term, ws_url, port]);
|
||||
|
||||
return (
|
||||
<div ref={el} className="xterm-panel" style={{height:"100%"}}>
|
||||
{!ws_url ? <p style={{ color: '#fff' }}>正在连接命令行服务...</p> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
function Mediator(obj) {
|
||||
const channels = {};
|
||||
|
||||
const mediator = {
|
||||
subscribe: function(channel, cb) {
|
||||
if (!channels[channel]) {
|
||||
channels[channel] = [];
|
||||
}
|
||||
channels[channel].push(cb);
|
||||
return this.unsubscribe.bind(null, channel, cb);
|
||||
},
|
||||
|
||||
unsubscribe: function(channel, cb) {
|
||||
let rs = channels[channel];
|
||||
let index = -1;
|
||||
if (rs) {
|
||||
for (let i = 0; i < rs.length; i++) {
|
||||
if (rs[i].name === cb.name) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (index >= 0) {
|
||||
channels[channel].splice(index, 1);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
publish: function(channel) {
|
||||
if (!channels[channel]) {
|
||||
return false;
|
||||
}
|
||||
const args = Array.prototype.slice.call(arguments, 1);
|
||||
channels[channel].forEach(subscription => {
|
||||
subscription.apply(null, args);
|
||||
});
|
||||
return this;
|
||||
},
|
||||
};
|
||||
|
||||
return obj ? Object.assign(obj, mediator) : mediator;
|
||||
}
|
||||
const mediator = new Mediator();
|
||||
export default mediator;
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
import React ,{ forwardRef, useEffect, useState } from 'react';
|
||||
import { Modal , Form , Input , Radio , Select } from 'antd';
|
||||
import SearchUser from '../Component/SearchUser';
|
||||
import './Index.scss';
|
||||
import Axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
function DivertModal({form , visible , onSuccess , onCancel,owner,repo}){
|
||||
const { getFieldDecorator, validateFields , setFieldsValue } = form;
|
||||
const [ cate , setCate ] = useState(0);
|
||||
const [ value , setValue ] = useState(undefined);
|
||||
|
||||
const [ organizations , setOrganizations ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
setFieldsValue({goal:cate})
|
||||
},[])
|
||||
|
||||
useEffect(()=>{
|
||||
if(owner && repo && visible===true){
|
||||
getTeam();
|
||||
}
|
||||
if(!visible){
|
||||
setFieldsValue({
|
||||
owner_name:undefined,
|
||||
identifier:undefined
|
||||
})
|
||||
setValue(undefined)
|
||||
}
|
||||
},[repo,owner,visible])
|
||||
|
||||
function getTeam(){
|
||||
const url = `/${owner}/${repo}/applied_transfer_projects/organizations.json`;
|
||||
Axios.get(url).then(result=>{
|
||||
if(result){
|
||||
setOrganizations(result.data.organizations);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 确认转移
|
||||
function onOk(){
|
||||
validateFields((error,values)=>{
|
||||
console.log(...values);
|
||||
if(!error){
|
||||
const url = `/${owner}/${repo}/applied_transfer_projects.json`;
|
||||
Axios.post(url,{
|
||||
...values
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
onSuccess(result.data && result.data.owner);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
function changeType(e){
|
||||
setCate(e.target.value);
|
||||
setFieldsValue({
|
||||
owner_name:undefined
|
||||
})
|
||||
}
|
||||
|
||||
function checkIdentifier(rule, value, callback){
|
||||
if(!value){
|
||||
callback();
|
||||
}
|
||||
if (repo && value !== repo) {
|
||||
callback("请输入当前项目的标识！");
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 5 },
|
||||
wrapperCol: { span: 18 },
|
||||
};
|
||||
|
||||
function getUser(id){
|
||||
setValue(id);
|
||||
setFieldsValue({
|
||||
owner_name:id
|
||||
})
|
||||
}
|
||||
return(
|
||||
<Modal
|
||||
width="620px"
|
||||
visible={visible}
|
||||
title="转移仓库"
|
||||
onCancel={onCancel}
|
||||
onOk={onOk}
|
||||
okText="确认转移"
|
||||
cancelText={"取消"}
|
||||
centered
|
||||
>
|
||||
<div className="diverModal">
|
||||
{
|
||||
cate === 0 ?
|
||||
<ul className="descUl">
|
||||
<li>转移需对方确认接受，转移成功后你将被移出仓库，其他已有成员权限不变</li>
|
||||
<li>转移成功后，仓库的地址将变更至目标用户的命名空间下</li>
|
||||
<li>已有成员如需继续操作仓库，需更新本地仓库的remote，使之指向新的地址</li>
|
||||
</ul>
|
||||
:
|
||||
<ul className="descUl">
|
||||
<li>仓库仅可以转移到您已经加入的组织中，不可以转移到未加入的组织中</li>
|
||||
<li>涉及到仓库改名操作，请提前做好仓库备份并且在转移后对本地仓库的remote进行修改</li>
|
||||
<li>转移仓库到组织后，你和组织创建者/管理员同时拥有对该仓库的管理操作</li>
|
||||
</ul>
|
||||
}
|
||||
<Form {...layout} colon={false} layout={"horizontal"}>
|
||||
<Form.Item label="转移给:" style={{marginBottom:"0px"}}>
|
||||
{getFieldDecorator("goal",{
|
||||
rules:[]
|
||||
})(
|
||||
<Radio.Group onChange={changeType}>
|
||||
<Radio value={0}>个人</Radio>
|
||||
<Radio value={1}>组织</Radio>
|
||||
</Radio.Group>
|
||||
)}
|
||||
</Form.Item>
|
||||
{
|
||||
cate === 0 &&
|
||||
<Form.Item label=" ">
|
||||
{getFieldDecorator("owner_name",{
|
||||
rules:[{required:true,message:"请输入目标用户名"}]
|
||||
})(
|
||||
// <Input placeholder="请输入目标用户" autoComplete={"off"}/>
|
||||
<SearchUser getUser={getUser} width={"100%"} placeholder="请输入目标用户" value={value}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
}
|
||||
{
|
||||
cate === 1 &&
|
||||
<Form.Item label=" ">
|
||||
{getFieldDecorator("owner_name",
|
||||
{rules:[{required:true,message:"请选择目标组织"}]}
|
||||
)(
|
||||
<Select placeholder="请选择目标组织" getPopupContainer={trigger => trigger.parentNode}>
|
||||
{
|
||||
organizations && organizations.length > 0 ?
|
||||
organizations.map((i,k)=>{
|
||||
return(
|
||||
<Option value={i.name}>{i.nickname}</Option>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
}
|
||||
|
||||
<Form.Item label="仓库标识:" style={{marginBottom:"0px"}}>
|
||||
{getFieldDecorator("identifier",
|
||||
{
|
||||
rules:[
|
||||
{required:true,message:"请输入仓库标识！"},
|
||||
{
|
||||
validator:checkIdentifier
|
||||
}
|
||||
]
|
||||
}
|
||||
)(
|
||||
<Input placeholder="请输入仓库标识" autoComplete={"off"}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<span className="color-grey-9" style={{marginLeft:"120px"}}>请输入当前项目的标识：<span className="ml5 mr5 color-grey-3">{repo}</span>进行确认！</span>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default Form.create()(forwardRef(DivertModal));
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.diverModal{
|
||||
.descUl{
|
||||
background-color: #fffae6;
|
||||
border-radius: 4px;
|
||||
padding:10px 15px;
|
||||
color: #efc16b;
|
||||
border:1px solid #efc16b;
|
||||
}
|
||||
.ant-form-item-required::before{
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -10,12 +10,4 @@ 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;
|
||||
}
|
||||
// 获取用户信息
|
||||
export const getUser = async (login)=>{
|
||||
return (await axios.get(`/users/${login}/hovercard.json`)).data;
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import React, { useState , forwardRef, useEffect } from 'react';
|
||||
import { Form , Modal , Input , Radio } from 'antd';
|
||||
import Axios from 'axios';
|
||||
|
||||
export default Form.create()(
|
||||
forwardRef((props)=>{
|
||||
const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
|
||||
useEffect(()=>{
|
||||
if(!visible){
|
||||
setFieldsValue({
|
||||
code:undefined,
|
||||
role:"developer"
|
||||
})
|
||||
}
|
||||
},[visible])
|
||||
|
||||
function onOk() {
|
||||
validateFields((error,values)=>{
|
||||
if(!error){
|
||||
const url = `/applied_projects.json`;
|
||||
Axios.post(url,{
|
||||
applied_project:{
|
||||
...values
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setVisible(false);
|
||||
props.showNotification("申请加入项目成功，等待审核!");
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
})
|
||||
}
|
||||
function checkValue(rule, value, callback){
|
||||
if(!value){
|
||||
callback();
|
||||
}
|
||||
if(value.length < 6 || value.length > 6){
|
||||
callback("请输入6位数的邀请码");
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
return(
|
||||
<React.Fragment>
|
||||
<Modal
|
||||
title="加入项目"
|
||||
width="480px"
|
||||
visible={visible}
|
||||
centered={true}
|
||||
onOk={onOk}
|
||||
onCancel={()=>setVisible(false)}
|
||||
>
|
||||
<Form layout={'inline'} className="inviteForm">
|
||||
<Form.Item label="项目邀请码">
|
||||
{getFieldDecorator("code",{
|
||||
rules:[
|
||||
{required:true,message:"请输入6位项目邀请码"},
|
||||
{validator:checkValue}
|
||||
]
|
||||
})(
|
||||
<Input placeholder="请输入6位项目邀请码" autoComplete={"off"} maxLength="6" style={{width:"300px"}}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="选择角色">
|
||||
{getFieldDecorator("role",{
|
||||
rules:[{required:true,message:"请选择角色"}]
|
||||
})(
|
||||
<Radio.Group defaultValue={"developer"}>
|
||||
<Radio value="manager">管理员</Radio>
|
||||
<Radio value="developer">开发者</Radio>
|
||||
<Radio value="reporter">报告者</Radio>
|
||||
</Radio.Group>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
<a onClick={()=>setVisible(true)}>加入项目</a>
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
)
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
import React, { useEffect , useState } from 'react';
|
||||
import './header.scss';
|
||||
|
||||
function Footer(){
|
||||
const [ value , setValue ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
try {
|
||||
var chromesettingArray = JSON.parse(localStorage.getItem('chromesetting'));
|
||||
setValue(chromesettingArray.footer);
|
||||
} catch (e) {
|
||||
}
|
||||
},[])
|
||||
|
||||
function showhtml(htmlString){
|
||||
var html = {__html:htmlString};
|
||||
return <div dangerouslySetInnerHTML={html}></div> ;
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div style={{height:"497px"}}></div>
|
||||
<div className="newFooter edu-txt-center">
|
||||
{value && showhtml(value)}
|
||||
{/* <div className="footerInfos">
|
||||
<ul>
|
||||
<li>社区</li>
|
||||
<li><a href={`/`} target="_blank">网站首页</a></li>
|
||||
<li><a href={`https://www.trustie.net/agreement`} target="_blank">服务协议</a></li>
|
||||
<li><a href={`https://forum.trustie.net/forums/1168/detail`} target="_blank">帮助中心</a></li>
|
||||
<li><a href={`https://forum.trustie.net/`} target="_blank">问吧交流</a></li>
|
||||
<li><a href={`https://www.trustie.net/cooperation`} target="_blank">合作伙伴</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>支持与服务</li>
|
||||
<li><a href={`https://forgeplus.trustie.net/docs/api`} target="_blank">API文档</a></li>
|
||||
<li><a href={`https://forum.trustie.net/forums/1168/detail`} target="_blank">帮助中心</a></li>
|
||||
<li><a href={`https://git-scm.com`} target="_blank">Git常用命令</a></li>
|
||||
<li><a href={`https://forum.trustie.net/forums/3080/detail`} target="_blank">DevOps使用文档</a></li>
|
||||
<li><a href={`https://forgeplus.trustie.net/projects/jasder/forgeplus/tree/master/CHANGELOG.md`} target="_blank">日志更新</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>合作伙伴</li>
|
||||
<li><a href={`http://www.sei.pku.edu.cn`} target="_blank">北京大学</a></li>
|
||||
<li><a href={`http://scse.buaa.edu.cn`} target="_blank">北京航空航天大学</a></li>
|
||||
<li><a href={`https://www.nju.edu.cn`} target="_blank">南京大学</a></li>
|
||||
<li><a href={`https://www.xtu.edu.cn`} target="_blank">湘潭大学</a></li>
|
||||
<li><a href={`http://www.iscas.ac.cn`} target="_blank">ISCAS</a></li>
|
||||
<li><a href={`https://www.ucloud.cn`} target="_blank">UCloud优刻得</a></li>
|
||||
<li><a href={`http://www.inforbus.com`} target="_blank">中创软件</a></li>
|
||||
<li><a href={`https://www.inspur.com`} target="_blank">浪潮集团</a></li>
|
||||
<li><a href={`http://www.copu.org.cn`} target="_blank">中国开源软件推进联盟</a></li>
|
||||
<li><a href={`https://www.sjtu.edu.cn`} target="_blank">上海交通大学</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>合作伙伴</li>
|
||||
<li><span>热线：</span></li>
|
||||
<li><span>QQ群：1071514693</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="footerCopy">© Copyright 2007~2021 国防科技大学Trustie团队 & IntelliDE <a href="https://beian.miit.gov.cn">湘ICP备 17009477号</a></p> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Footer;
|
||||
|
|
@ -1,456 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import AccountProfile from "../../modules/user/AccountProfile";
|
||||
import { getImageUrl } from 'educoder'
|
||||
import axios from 'axios';
|
||||
import { Input , notification , Dropdown , Menu } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import LoginDialog from '../../modules/login/LoginDialog';
|
||||
import HeadSearch from '../Component/HeadSearch';
|
||||
|
||||
import AddProjectModal from './AddProjectModal';
|
||||
import '../../modules/tpm/TPMIndex.css';
|
||||
|
||||
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,
|
||||
RadioGroupvalue: undefined,
|
||||
submitapplications: false,
|
||||
isRender: false,
|
||||
showTrial: false,
|
||||
setevaluatinghides: false,
|
||||
occupation: 0,
|
||||
mydisplay: false,
|
||||
headtypesonClickbool: false,
|
||||
headtypess: "/",
|
||||
settings: null,
|
||||
visiblemyss: false,
|
||||
openSearch:false,
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
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) {}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
})
|
||||
};
|
||||
|
||||
// 关闭
|
||||
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,
|
||||
})
|
||||
}
|
||||
|
||||
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));
|
||||
} 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addMenu=(list)=>{
|
||||
return(
|
||||
list && list.length >0 &&
|
||||
<div className="dropdownFlex">
|
||||
<Menu>
|
||||
{
|
||||
list.map((item,key)=>{
|
||||
return(
|
||||
(item.name !=="加入课堂" && item.name !=="加入开发项目") && <Menu.Item key={item.name+key}><a href={item.url}>{item.name}</a></Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Menu.Item><AddProjectModal showNotification={this.props.showNotification}/></Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
renderMenu=(personal)=>{
|
||||
const { current_user } = this.props;
|
||||
return(
|
||||
<Menu className="currentMenu">
|
||||
<Menu.Item>
|
||||
<span title={current_user && current_user.username}>{current_user && current_user.username}</span>
|
||||
</Menu.Item>
|
||||
{
|
||||
personal && personal.length > 0 && personal.map((item,key)=>{
|
||||
return(
|
||||
<li key={key}><a href={item.url} target="_blank">{item.name}</a></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
<li><Link to={`/settings/SSH`}>设置</Link></li>
|
||||
<Menu.Item><a onClick={() => this.educoderloginysl()}>退出</a></Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { match} = this.props;
|
||||
let current_user = this.props.user;
|
||||
let {
|
||||
AccountProfiletype,
|
||||
user,
|
||||
isRender,
|
||||
headtypesonClickbool,
|
||||
headtypess,
|
||||
settings,
|
||||
} = 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 && this.props.mygetHelmetapi.navbar && 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.search;
|
||||
let notice_url = settings && settings.common && settings.common.notice;
|
||||
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}
|
||||
/> : ""}
|
||||
{
|
||||
settings && settings.nav_logo_url ?
|
||||
<a href={settings && settings.new_course.default_url} className={"fl mr50"} style={{minWidth:"45px"}}>
|
||||
<img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={getImageUrl(`/${settings.nav_logo_url}`)}></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 ? this.SearchInput(openSearch,search_url):""} */}
|
||||
<HeadSearch {...this.props}/>
|
||||
{
|
||||
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 ?
|
||||
<div className="ml30 edu-menu-panel">
|
||||
{user && user.login &&
|
||||
<a href={`${notice_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>:""
|
||||
}
|
||||
</div>
|
||||
{!user || (user && !user.login) ?
|
||||
<span className="font-15 ml30">
|
||||
<a onClick={() => this.educoderlogin()} className="mr5 color-grey-6">登录</a>
|
||||
{
|
||||
settings && settings.common && settings.common.register &&
|
||||
<span><em className="vertical-line"></em><a className="ml5 color-grey-6" href={`${settings.common.register}`} target="_blank">注册</a></span>
|
||||
}
|
||||
</span>
|
||||
:
|
||||
<Dropdown placement={`bottomRight`} overlay={this.renderMenu(settings && settings.personal)}>
|
||||
<a href={`/users/${this.props.current_user && this.props.current_user.login}`}>
|
||||
<img alt="头像" src={getImageUrl(`/${user.image_url}`)} className="currentImg"></img>
|
||||
</a>
|
||||
</Dropdown>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NewHeader;
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
|
||||
.dropdownFlex{
|
||||
display:flex;
|
||||
background:#fff;
|
||||
border-radius: 3px;
|
||||
.ant-menu-vertical > .ant-menu-item{
|
||||
border:none;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin:0px;
|
||||
&.ant-menu-item-selected{
|
||||
background-color: #fff;
|
||||
a{color: rgba(0, 0, 0, 0.65)!important;}
|
||||
}
|
||||
&.ant-menu-item-active{
|
||||
a{color: #4cacff!important;}
|
||||
}
|
||||
}
|
||||
.ant-menu-vertical{
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
.currentImg{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.currentMenu{
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
padding:0px;
|
||||
li{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding:0px!important;
|
||||
cursor: default;
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
}
|
||||
&:first-child{
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
&:last-child{
|
||||
border-top: 1px solid #eee;
|
||||
a{
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
}
|
||||
}
|
||||
a{
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
display: block;
|
||||
color: #666;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
background: #4CACFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.newFooter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #323232;
|
||||
clear: both;
|
||||
min-width: 1200px;
|
||||
z-index: 8;
|
||||
left: 0px;
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom:0px !important;
|
||||
}
|
||||
.footerInfos{
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
margin:0px auto;
|
||||
justify-content: space-around;
|
||||
padding:60px 0px;
|
||||
& >ul{
|
||||
padding:0px 40px;
|
||||
box-sizing: border-box;
|
||||
max-width: 25%;
|
||||
text-align: left;
|
||||
li{
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
&:first-child{
|
||||
font-size: 17px;
|
||||
}
|
||||
&>a,&>span{
|
||||
color: #bbb;
|
||||
}
|
||||
&>a:hover{
|
||||
color: #4cacff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footerCopy{
|
||||
color: #bbb;
|
||||
border-top: 1px solid #4e4e4e;
|
||||
padding:10px 0px;
|
||||
a{
|
||||
color: #bbb;
|
||||
&:hover{
|
||||
color: #4cacff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.inviteForm{
|
||||
.ant-form-item{
|
||||
margin-right: 0px;
|
||||
}
|
||||
.ant-form-item-label{
|
||||
width: 110px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import { withRouter } from "react-router";
|
|||
import { SnackbarHOC } from "educoder";
|
||||
import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
|
||||
import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
|
||||
import Handbook from './Component/Handbook';
|
||||
import "./css/index.scss";
|
||||
|
||||
import Loadable from "react-loadable";
|
||||
|
|
@ -26,37 +27,24 @@ const ProjectDetail = Loadable({
|
|||
loading: Loading,
|
||||
});
|
||||
|
||||
class Index extends Component {
|
||||
const Infos = Loadable({
|
||||
loader: () => import("./users/Infos"),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
componentDidUpdate=()=>{
|
||||
this.props.history.listen(()=>{
|
||||
if (document.body.scrollTop || document.documentElement.scrollTop > 0) {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
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) => (
|
||||
|
|
@ -70,8 +58,12 @@ class Index extends Component {
|
|||
)}
|
||||
></Route>
|
||||
<Route
|
||||
exact
|
||||
path="/"
|
||||
render={(props) => (
|
||||
this.props.current_user && this.props.current_user.login ?
|
||||
<Infos {...this.props} {...props} />
|
||||
:
|
||||
<ProjectIndex {...this.props} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
|
|
|
|||
|
|
@ -1,534 +0,0 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { WhiteBack , Box , LongWidth , ShortWidth , Gap , AlignCenter , FlexAJ } from '../Component/layout';
|
||||
import { Dropdown , Menu , Divider , Spin, Button } 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';
|
||||
import Invite from './sub/Invite';
|
||||
/**
|
||||
* projectDetail.type:0是托管项目，1是镜像项目，2是同步镜像项目(为2时不支持在线创建、在线上传、在线修改、在线删除、创建合并请求等功能)
|
||||
*/
|
||||
|
||||
function turnbar(str){
|
||||
if(str && str.length>0 && str.indexOf("/")>-1){
|
||||
return str.replaceAll('/','%2F');
|
||||
}
|
||||
return str;
|
||||
}
|
||||
function returnbar(str){
|
||||
if(str && str.length>0 && str.indexOf("%2F")>-1){
|
||||
return str.replaceAll('%2F','/');
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
function CoderDepot(props){
|
||||
const [ projectDetail , setProjectDetail ]= useState(undefined);
|
||||
const [ inviteCode , setInviteCode ] = 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 [ lesson_url , setLessonUrl ] = useState(undefined);
|
||||
const [ readme , setReadme ] = useState(undefined);
|
||||
const [ defaultBranch , setDefaultBranch ] = useState(undefined);
|
||||
const [ editReadme , setEditReadme ] = useState(false);
|
||||
const [ pullsFlag , setPullsFlag ] = useState(true);
|
||||
const [ issuesFlag , setIssuesFlag ] = useState(true);
|
||||
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
let branchName = props.match.params.branchName;
|
||||
branchName = returnbar(branchName);
|
||||
const details = props.projectDetail;
|
||||
let pathname = props.history.location.pathname;
|
||||
|
||||
const { bannerList } = props;
|
||||
|
||||
useEffect(()=>{
|
||||
if(bannerList && bannerList.length>0){
|
||||
let a = bannerList.filter(i=>i.menu_name === "pulls");
|
||||
let i = bannerList.filter(i=>i.menu_name === "issues");
|
||||
if(a && a.length === 0){
|
||||
setPullsFlag(false);
|
||||
}
|
||||
if(i && i.length === 0){
|
||||
setIssuesFlag(false);
|
||||
}
|
||||
}
|
||||
},[bannerList])
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
if(details){
|
||||
setProjectDetail(details);
|
||||
setDesc(details.description);
|
||||
setWebsite(details.website);
|
||||
setLessonUrl(details.lesson_url);
|
||||
setDefaultBranch(details.default_branch);
|
||||
setInviteCode(details.invite_code);
|
||||
}
|
||||
},[details])
|
||||
|
||||
useEffect(()=>{
|
||||
if(treeValue){
|
||||
setTreeValuePath(treeValue.split('/'));
|
||||
}else{
|
||||
setTreeValuePath(undefined);
|
||||
}
|
||||
},[treeValue])
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
if (projectsId && owner && defaultBranch){
|
||||
let b = turnbar(branchName) ;
|
||||
if(pathname.indexOf(`/projects/${owner}/${projectsId}`) > -1 && pathname.indexOf(`/tree/${b}/`) > -1) {
|
||||
let url = pathname.split(`/tree/${b}/`)[1];
|
||||
setTreeValue(url);
|
||||
getFileInfo(url,branchName);
|
||||
setType("file");
|
||||
}else{
|
||||
setTreeValue(undefined);
|
||||
getDirInfo(branchName || defaultBranch);
|
||||
setType("dir");
|
||||
}
|
||||
}
|
||||
},[projectsId,owner,pathname,defaultBranch])
|
||||
|
||||
// 获取主目录列表
|
||||
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.committer);
|
||||
setMainFlag(true);
|
||||
setReadOnly(true);
|
||||
setReadme(result.data.readme);
|
||||
setEditReadme(false);
|
||||
setHide(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.committer);
|
||||
setMainFlag(false);
|
||||
setReadOnly(!editReadme);
|
||||
setHide(true);
|
||||
}
|
||||
setTimeout(function(){setIsSpin(false);},500)
|
||||
}).catch(error=>{setIsSpin(false);})
|
||||
}
|
||||
|
||||
// 切换分支或者标签
|
||||
function changeBranch(value){
|
||||
let checkvalue = turnbar(value);
|
||||
let url = `/projects/${owner}/${projectsId}${value && `/tree/${checkvalue}`}${treeValue ? `/${treeValue}`:""}`;
|
||||
props.history.push(url);
|
||||
}
|
||||
|
||||
// 文件相关的下拉项
|
||||
function fileMenu(){
|
||||
let b = branchName || defaultBranch;
|
||||
let checkvalue = turnbar(b);
|
||||
return (
|
||||
<Menu>
|
||||
<Menu.Item><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${checkvalue}/uploadfile${treeValue === undefined ? "" : `/${treeValue}`}`)}>上传文件</a></Menu.Item>
|
||||
<Menu.Item><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${checkvalue}/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 || defaultBranch;
|
||||
let checkvalue = turnbar(branch);
|
||||
props.history.push(`/projects/${owner}/${projectsId}/tree/${checkvalue}`);
|
||||
};
|
||||
// 子目录路径返回链接
|
||||
function returnUlr(url){
|
||||
let enBranch = turnbar(branchName);
|
||||
props.history.push(`/projects/${owner}/${projectsId}/tree${enBranch?`/${enBranch}`:""}/${url}`);
|
||||
}
|
||||
// 点击跳转到子目录
|
||||
function goToSubRoot(path,type,filename){
|
||||
if(type!=="submodule"){
|
||||
let enBranch = branchName || defaultBranch;
|
||||
let checkvalue = turnbar(enBranch);
|
||||
setType(type);
|
||||
props.history.push(`/projects/${owner}/${projectsId}${`/tree/${checkvalue}`}${path?`/${path}`:""}`);
|
||||
}
|
||||
}
|
||||
|
||||
function onEdit(readOnly){
|
||||
setReadOnly(readOnly);
|
||||
setEditReadme(false);
|
||||
}
|
||||
function ChangeFile(path, readOnly){
|
||||
//点击直接跳转页面 加载一次路由
|
||||
let enBranch = branchName || defaultBranch;
|
||||
let checkvalue = turnbar(enBranch);
|
||||
props.history.push(`/projects/${owner}/${projectsId}/tree/${checkvalue}/${path}`);
|
||||
setType("file");
|
||||
setEditReadme(true);
|
||||
};
|
||||
|
||||
function changeHide(hide){
|
||||
setHide(!hide);
|
||||
}
|
||||
|
||||
function urlLink(link){
|
||||
if(props.checkIfLogin()===false){
|
||||
props.showLoginDialog()
|
||||
return false;
|
||||
}
|
||||
props.history.push(link);
|
||||
}
|
||||
|
||||
const downloadMenu = (
|
||||
<CloneAddress
|
||||
http_url={projectDetail && projectDetail.clone_url}
|
||||
ssh_url = {projectDetail && projectDetail.ssh_url}
|
||||
zip_url={zip_url}
|
||||
tar_url={tar_url}
|
||||
showNotification={props.showNotification}/>
|
||||
)
|
||||
// 确认修改简介、website、实践课程链接
|
||||
function okUpdate(d,w,l){
|
||||
const url = `/${owner}/${projectsId}.json`;
|
||||
axios.put(url,{
|
||||
description:d,website:w,lesson_url:l
|
||||
}).then(result=>{
|
||||
if(result && result.data && result.data.id){
|
||||
setDesc(result.data.description);
|
||||
setWebsite(result.data.website);
|
||||
setLessonUrl(result.data.lesson_url);
|
||||
}
|
||||
})
|
||||
}
|
||||
let n = fileInfo && fileInfo.name;
|
||||
const mdFlag = n && n.substring(n.length-3,n.length) === ".md";
|
||||
|
||||
const { current_user } = props;
|
||||
const baseOperate = projectDetail && projectDetail.permission && projectDetail.permission !=="Reporter";
|
||||
const fileOperate = type === "dir" && projectDetail && projectDetail.type !== 2 && ((projectDetail.permission && projectDetail.permission !=="Reporter") || (current_user && current_user.admin));
|
||||
return(
|
||||
<WhiteBack>
|
||||
<UpdateDescModal desc={desc} website={website} lesson_url={lesson_url} 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 || defaultBranch}
|
||||
visible={visible}
|
||||
onClose={()=>setVisible(false)}
|
||||
list = {mainFlag ? dirInfo : undefined}
|
||||
/>
|
||||
<div className="drawerBtn" onClick={()=>setVisible(true)}>
|
||||
<i className="iconfont icon-youjiantou font-16"></i>
|
||||
<span>目录</span>
|
||||
</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 || defaultBranch}
|
||||
changeBranch={changeBranch}
|
||||
owner={owner}
|
||||
history={props.history}
|
||||
branchList={projectDetail && projectDetail.branches && projectDetail.branches.list}
|
||||
></SelectBranch>
|
||||
:
|
||||
<span>分支：<span className="color-grey-6">{branchName || defaultBranch}</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>
|
||||
{
|
||||
baseOperate && ((projectDetail.type !== 2 && pullsFlag) || issuesFlag )&&
|
||||
<div className="mr20 addOptionBtn">
|
||||
{
|
||||
projectDetail.type !== 2 && pullsFlag &&
|
||||
<a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/pulls/new`)} >+ 合并请求</a>
|
||||
}
|
||||
{
|
||||
issuesFlag &&
|
||||
<a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/issues/new`)} >+ 任务</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{ fileOperate &&
|
||||
<Dropdown overlay={fileMenu()} className="mr20" trigger={['click']}>
|
||||
<Button type="default">文件 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-grey-9"></i></Button>
|
||||
</Dropdown>
|
||||
}
|
||||
|
||||
<Dropdown overlay={downloadMenu} placement="bottomRight" trigger={['click']}>
|
||||
<Button type={'primary'}>下载 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-white"></i></Button>
|
||||
</Dropdown>
|
||||
</AlignCenter>
|
||||
</FlexAJ>
|
||||
{
|
||||
dirInfo || fileInfo ?
|
||||
<div className="listtable">
|
||||
{
|
||||
lastCommit &&
|
||||
<div className="listtablehead">
|
||||
<User url={getImageUrl(`/${lastCommitAuthor && lastCommitAuthor.image_url}`)} name={lastCommitAuthor && lastCommitAuthor.name} id={lastCommitAuthor && lastCommitAuthor.id} login={lastCommitAuthor && lastCommitAuthor.login}/>
|
||||
<div className={hideBtn && hide ? "ellipsistxt hidetxt" :"ellipsistxt"}>
|
||||
<pre id="ptxt">{lastCommit && lastCommit.message}</pre>
|
||||
</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/branch/${turnbar(branchName || defaultBranch)}`} 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}
|
||||
md={mdFlag}
|
||||
onEdit={onEdit}
|
||||
currentBranch={branchName || defaultBranch}
|
||||
type={projectDetail.type}
|
||||
></CoderRootFileDetail>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
: ""
|
||||
}
|
||||
{
|
||||
(dirInfo && dirInfo.length === 0) && (fileInfo && fileInfo.length === 0) ? <Nodata _html="暂未发现文件"/> :""
|
||||
}
|
||||
{/* readme文件显示(显示文件详情时不显示readme文件) */}
|
||||
{ dirInfo && (readme && readme.content) ? <ReadMe ChangeFile={ChangeFile} readme={readme} operate={props && (props.isManager || props.isDeveloper) && projectDetail.type !==2 } 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",wordBreak:"break-all"}}>{desc}</p>}
|
||||
{
|
||||
website &&
|
||||
<p className="color-grey-6 df">
|
||||
<i className="iconfont icon-lianjie2 font-15 mr10 color-grey-9"></i>
|
||||
<a href={website} className="color-grey-6" target="_blank" style={{wordBreak:"break-all",lineHeight:"20px",marginTop:"5px",textDecoration:"underline"}}>{website}</a>
|
||||
</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-6"></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-3"></i>
|
||||
<span>{projectDetail.license_name}</span>
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
{
|
||||
inviteCode &&
|
||||
<div>
|
||||
<Divider />
|
||||
<Invite code={inviteCode} className={"detailsCode"}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
lesson_url &&
|
||||
<div>
|
||||
<Divider />
|
||||
<p className="font-16 color-grey-6">实践课程</p>
|
||||
<a href={lesson_url} target="_blank" className="color-grey-6" style={{textDecoration:"underline",wordBreak:"break-all"}}>{lesson_url}</a>
|
||||
</div>
|
||||
}
|
||||
{/* 发布 */}
|
||||
{
|
||||
projectDetail && projectDetail.release_versions &&
|
||||
<React.Fragment>
|
||||
<Divider />
|
||||
<Releases
|
||||
owner={owner}
|
||||
projectsId={projectsId}
|
||||
releaseVersions={projectDetail.release_versions}
|
||||
history={props.history}
|
||||
baseOperate={baseOperate}
|
||||
projectType={projectDetail.type}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{/* 贡献者 */}
|
||||
{
|
||||
projectDetail && projectDetail.contributors &&
|
||||
<Contributors contributors={projectDetail && projectDetail.contributors} owner={owner} projectsId={projectsId} />
|
||||
}
|
||||
{/* 语言 */}
|
||||
{ projectDetail && projectDetail.languages &&
|
||||
<React.Fragment>
|
||||
<Divider />
|
||||
<LanguagePower languages={projectDetail.languages}/>
|
||||
</React.Fragment>
|
||||
}
|
||||
</Gap>
|
||||
</ShortWidth>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
</WhiteBack>
|
||||
)
|
||||
}
|
||||
export default CoderDepot;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { truncateCommitId } from '../common/util';
|
||||
|
||||
const typeIco = {
|
||||
"submodule":"icon-file-submodule font-17",
|
||||
"file":'icon-wenjia font-15',
|
||||
"dir":"icon-wenjianjia1 font-15"
|
||||
}
|
||||
|
||||
function CoderDepotCatalogue({item , goToSubRoot , owner , projectsId }){
|
||||
return(
|
||||
<li>
|
||||
<span>
|
||||
<a onClick={()=>goToSubRoot(item.path,item.type,item.name)} className={item.type === "submodule" && "submoduleStyle"}>
|
||||
<i className={`iconfont ${typeIco[`${item.type}`]} color-green-file 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;
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue