forked from Gitlink/forgeplus-react
merge codes
This commit is contained in:
parent
2f3d914fdf
commit
e7b6f6fc35
|
|
@ -1,5 +1,5 @@
|
|||
<h3>前端react环境安装：</h3>
|
||||
<p>1、 安装node v6.9.x；此安装包含了node和npm。</p>
|
||||
<p>1、 安装node v12.10.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>
|
||||
|
|
|
|||
34
add.txt
34
add.txt
|
|
@ -1,34 +0,0 @@
|
|||
|
||||
新版tpi改动的文件：
|
||||
Index.js
|
||||
contex/TPIContextProvider.js
|
||||
page/main/LeftViewContainer.js
|
||||
taskList/TaskList.js
|
||||
TPMIndexHOC.js
|
||||
App.js
|
||||
CodeRepositoryViewContainer.js
|
||||
|
||||
Index.js
|
||||
choose={context.chooses}
|
||||
|
||||
|
||||
TPIContextProvider.js
|
||||
|
||||
LeftViewContainer.js
|
||||
|
||||
TaskList.js
|
||||
|
||||
TPMIndexHOC.js
|
||||
|
||||
MainContentContainer
|
||||
新：rep_content返回值多了一层 {content: '...'}
|
||||
|
||||
|
||||
|
||||
|
||||
TODO
|
||||
待同步
|
||||
1、timer图标样式更换
|
||||
index.html
|
||||
WebSSHTimer.css
|
||||
WebSSHTimer.js
|
||||
|
|
@ -19,8 +19,7 @@ const getClientEnvironment = require("./env");
|
|||
|
||||
let publicPath = "/react/build/";
|
||||
const publicUrl = publicPath.slice(0, -1);
|
||||
// const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
|
||||
const shouldUseSourceMap = process.env.NODE_ENV !== "production";
|
||||
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
|
||||
const env = getClientEnvironment(publicPath);
|
||||
|
||||
// This is the production configuration.
|
||||
|
|
@ -55,8 +54,7 @@ module.exports = {
|
|||
},
|
||||
bail: true,
|
||||
mode: "production",
|
||||
// devtool: false, //测试版
|
||||
devtool: shouldUseSourceMap?'source-map':false,
|
||||
devtool: false, //测试版
|
||||
entry: [require.resolve("./polyfills"), paths.appIndexJs],
|
||||
output: {
|
||||
path: paths.appBuild,
|
||||
|
|
|
|||
|
|
@ -4071,16 +4071,18 @@
|
|||
},
|
||||
"cross-env": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
|
||||
"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
|
||||
"resolved": "https://registry.nlark.com/cross-env/download/cross-env-7.0.3.tgz",
|
||||
"integrity": "sha1-hlJkspZ33AFbqEGJGJZd0jL8VM8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cross-spawn": "^7.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
||||
"resolved": "https://registry.nlark.com/cross-spawn/download/cross-spawn-7.0.3.tgz",
|
||||
"integrity": "sha1-9zqFudXUHQRVUcF34ogtSshXKKY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-key": "^3.1.0",
|
||||
"shebang-command": "^2.0.0",
|
||||
|
|
@ -4089,26 +4091,30 @@
|
|||
},
|
||||
"path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
|
||||
"resolved": "https://registry.nlark.com/path-key/download/path-key-3.1.1.tgz",
|
||||
"integrity": "sha1-WB9q3mWMu6ZaDTOA3ndTKVBU83U=",
|
||||
"dev": true
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
|
||||
"resolved": "https://registry.nlark.com/shebang-command/download/shebang-command-2.0.0.tgz",
|
||||
"integrity": "sha1-zNCvT4g1+9wmW4JGGq8MNmY/NOo=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"shebang-regex": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"shebang-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
|
||||
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
|
||||
"resolved": "https://registry.nlark.com/shebang-regex/download/shebang-regex-3.0.0.tgz",
|
||||
"integrity": "sha1-rhbxZE2HPsrYQ7AwexQzYtTEIXI=",
|
||||
"dev": true
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
|
||||
"resolved": "https://registry.nlark.com/which/download/which-2.0.2.tgz",
|
||||
"integrity": "sha1-fGqN0KY2oDJ+ELWckobu6T8/UbE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"isexe": "^2.0.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
"code-prettify": "^0.1.0",
|
||||
"codemirror": "^5.64.0",
|
||||
"connected-react-router": "4.4.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^3.5.2",
|
||||
"dompurify": "^2.3.3",
|
||||
"dotenv": "4.0.0",
|
||||
|
|
|
|||
172
readme.txt
172
readme.txt
|
|
@ -1,172 +0,0 @@
|
|||
其他的文档位置：
|
||||
/educoder/public/react/public/js/readme.txt 关于js_min_all
|
||||
/educoder/educoder/public/react/scripts/readme-cdn.txt 关于CDN
|
||||
/educoder/public/react/src/modules/page/readme.txt 关于TPI
|
||||
/educoder/public/editormd/lib/readme-marked.txt 关于md编辑器 marked.js
|
||||
|
||||
1、 安装node v6.9.x；此安装包含了node和npm。
|
||||
|
||||
2、 安装cnpm（命令行）： npm install -g cnpm --registry=https://registry.npm.taobao.org
|
||||
|
||||
3、 安装依赖的js库（public/react目录下<即项目package.json所在目录>，开启命令行）： cnpm install
|
||||
|
||||
4、 如果你的ruby服务使用的是3000端口，则需要在package.json中修改"port"参数的值
|
||||
|
||||
5、 启动服务（命令行-目录同3）： npm start
|
||||
|
||||
6、 build初始化 npm run build
|
||||
|
||||
注意：
|
||||
1、cnpm install 之前先需要修改下ruby mine的一个settings，防止ruby mine对node_modules目录里的内容建索引（详情见线上文档-react开发环境搭建）
|
||||
|
||||
|
||||
线上文档-react开发环境搭建 地址： https://www.trustie.net/boards/6862/topics/46425
|
||||
|
||||
2、package.json中配置：
|
||||
"proxy": "http://localhost:3000",
|
||||
"port": "3007"
|
||||
|
||||
目前暂时必须写为和上面的一样，ruby服务端口为3000，node服务端口为3007；当当前端口为3007时，程序会将axios发出的请求转到localhost:3000上，进行跨域请求。
|
||||
|
||||
3、静态js加载问题：
|
||||
editormd源码改动，注释掉了564行 加载codemirror/codemirror.min的js代码。因为codemirror 已经加载了，codemirror对象会带有插件，重复加载会覆盖全局codemirror对象，使得之前加载的插件失效
|
||||
|
||||
----------------------------------------------------------------------------------------------
|
||||
|
||||
React开发相关知识点
|
||||
需要了解的ES6的知识 https://www.trustie.net/boards/6862/topics/46427
|
||||
|
||||
----------------------------------------------------------------------------------------------
|
||||
|
||||
新加入的lib有： axios、material-ui、lodash、classnames、moment、immutability-helper
|
||||
rc-tree、rc-form 、rc-rate、rc-pagination、rc-select 、showdown
|
||||
考虑替代删除确认弹出框的组件http://react-component.github.io/tooltip/examples/onVisibleChange.html
|
||||
|
||||
|
||||
----------------------------------------------------------------------------------------------
|
||||
TPI State整理 START
|
||||
----------------------------------------------------------------------------------------------
|
||||
TPIContextProvider 详情接口的所有state
|
||||
|
||||
Index.js
|
||||
taskListLoading
|
||||
challenges
|
||||
challengesDrawerOpen
|
||||
|
||||
MainContentContainer.js
|
||||
repositoryCode: '',
|
||||
currentPath: '', // 当前所选的path，可能是一个只读的path（只读path的话，challenge.athIndex为-1）
|
||||
isEditablePath // 是否是可以编辑的path（）
|
||||
|
||||
open: false, // 繁忙等级等提示用Dialog， TODO 考虑重构封装到根组件
|
||||
gameBuilding: false, // 评测中标志
|
||||
codeStatus: 2, // 0 已修改 1 保存中 2 已保存 3 保存失败
|
||||
|
||||
codeLoading: false, // code加载中
|
||||
resetCodeDialogOpen: false, // TODO考虑重构封装到根组件
|
||||
resetPassedCodeDialogOpen: false, // TODO考虑重构封装到根组件
|
||||
|
||||
|
||||
LeftViewContainer.js
|
||||
tabIndex: 0, 页签index
|
||||
dialogOpen: false,
|
||||
gameAnswer: '', 答案
|
||||
snackbarOpen: false,
|
||||
comments: [], 评论
|
||||
comment_count_without_reply: 0, 评论数量 TODO 和详情接口字段重复
|
||||
// 默认pageSize为10
|
||||
currentPage: 1, 评论分页
|
||||
loadingComments: true, 评论加载中
|
||||
gotNewReply: false, 新的回复
|
||||
|
||||
CodeRepositoryViewContainer.js
|
||||
drawerOpen: false,
|
||||
loadingFirstRepoFiles: false, drawer里的loading状态
|
||||
fileTreeData: "", 文件树
|
||||
codeRepositoryViewExpanded: false, 展开状态
|
||||
|
||||
|
||||
CodeEvaluateView.js
|
||||
testSetsInitedArray: testSetsExpandedArrayInitVal.slice(0), 测试集是否初始化标志
|
||||
evaluateViewExpanded: false,
|
||||
tabIndex: 1, 页签index
|
||||
----------------------------------------------------------------------------------------------
|
||||
TPI State整理 END
|
||||
----------------------------------------------------------------------------------------------
|
||||
|
||||
----------------------------------------------------------------------------------------------
|
||||
重要：TPI实现时修改的js库的记录 START
|
||||
----------------------------------------------------------------------------------------------
|
||||
|
||||
----------------------------------------------------------------------------------------------
|
||||
重要：TPI实现时修改的js库的记录 END
|
||||
----------------------------------------------------------------------------------------------
|
||||
create_kindeditor.js __isR 表示是react环境，react环境下采用事件通知react组件来处理
|
||||
if (window['__isR'] === true) {
|
||||
$(document).trigger("onReply", { commentContent:tContents, id:id, editor:params.editor } );
|
||||
} else {
|
||||
params.form.submit();
|
||||
}
|
||||
|
||||
editormd.min.js 直接注释掉了codemirror.min的加载，应该改成有codeMirror了则不加载
|
||||
// codemirror 已经加载了，codemirror会有插件，重复加载会使得之前加载的插件失效
|
||||
// editormd.loadScript(loadPath + "codemirror/codemirror.min", function() {
|
||||
对应提交项
|
||||
Revision: 73d95ce266d5d7e55a3a88d08d1247b3a08c7caf
|
||||
Date: 2018/4/2 16:12:21
|
||||
Message: 切下一题时更新左侧editormd里的内容，更新右侧codemirror内容。
|
||||
|
||||
js_min_all.js 最后面手动加入了若干js代码，还没做分离、再合并处理 date:180507
|
||||
is_cdn_link tpi_html_show方法
|
||||
|
||||
|
||||
|
||||
|
||||
----------------------------------------------------------------------------------------------
|
||||
TPM使用react实现的利弊 START
|
||||
----------------------------------------------------------------------------------------------
|
||||
1、全部使用react重写
|
||||
做法：第一屏使用新接口，之前的js脚本还是继续使用，有必要的话（需要局部刷新的），将部分jquery实现改为react实现
|
||||
利：
|
||||
tpi中评论组件、文件树组件方便复用
|
||||
js、css库管理方便
|
||||
|
||||
暂时不依赖于react的状态管理
|
||||
之前的ajax请求还是可以暂时复用
|
||||
|
||||
|
||||
弊：
|
||||
接口评估？
|
||||
rails模板要改成jsx语法
|
||||
头部功能区域、底部静态链接区域会存在重复代码 ： react版和非react版
|
||||
codemirror等组件的使用会不会有问题？
|
||||
|
||||
学习成本
|
||||
|
||||
！！目前决定，新页面或者评论组件所在页面使用react实现
|
||||
----------------------------------------------------------------------------------------------
|
||||
TPM使用react实现的利弊 END
|
||||
----------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
其他方式：comments组件build到新入口后，将代码copy到rails页面
|
||||
----------------------------------------------------------------------------------------------
|
||||
不错的库 START
|
||||
----------------------------------------------------------------------------------------------
|
||||
https://livicons.com/icons-original -- 收费 动画icon
|
||||
https://github.com/maxwellito/vivus -- 让SVG标签动起来
|
||||
http://ianlunn.github.io/Hover/ -- hover 动画
|
||||
https://github.com/legomushroom/mojs
|
||||
https://github.com/juliangarnier/anime --js动画
|
||||
https://codepen.io/juliangarnier/pen/gmOwJX
|
||||
https://github.com/daneden/animate.css
|
||||
|
||||
|
||||
A responsive tour snippet, with a step-by-step guide(onboarding) to help users understand how to use your website.
|
||||
|
||||
https://github.com/sorich87/bootstrap-tour
|
||||
https://github.com/linkedin/hopscotch
|
||||
https://github.com/Robophil/Product-Tour
|
||||
|
||||
code editor
|
||||
https://microsoft.github.io/monaco-editor/
|
||||
|
|
@ -104,7 +104,7 @@ const ProjectIndex = Loadable({
|
|||
});
|
||||
|
||||
const Home = Loadable({
|
||||
loader: () => import('./home/Index'),
|
||||
loader: () => import('./home/index'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,161 +0,0 @@
|
|||
import React , { useEffect } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import Beijing from './Img/unit/beijing.png';
|
||||
import SHJT from './Img/unit/SHJT.png';
|
||||
import DD from './Img/unit/DD.png';
|
||||
import HW from './Img/unit/HW.png';
|
||||
import ML from './Img/unit/ML.png';
|
||||
import QH from './Img/unit/QH.png';
|
||||
import QZ from './Img/unit/QZ.png';
|
||||
import TX from './Img/unit/TX.png';
|
||||
import XH from './Img/unit/XH.png';
|
||||
import XJY from './Img/unit/XJY.png';
|
||||
import ZC from './Img/unit/ZC.png';
|
||||
import GFKJ from './Img/unit/GFKJ.png';
|
||||
import BJHKHT from './Img/unit/BJHKHT.png';
|
||||
import ISCAS from './Img/unit/ISCAS.png';
|
||||
import NJDX from './Img/unit/NJDX.png';
|
||||
import CEC from './Img/unit/CEC.png';
|
||||
import KYRJLM from './Img/unit/KYRJLM.png';
|
||||
import WXYJY from './Img/unit/WXYJY.png';
|
||||
import HSKY from './Img/unit/HSKY.png';
|
||||
import LSLM from './Img/unit/LSLM.png';
|
||||
import TG from './Img/unit/TG.png';
|
||||
import LC from './Img/unit/LC.png';
|
||||
import YKD from './Img/unit/YKD.png';
|
||||
import Axios from 'axios';
|
||||
import { useState } from 'react';
|
||||
import { getImageUrl } from 'educoder';
|
||||
|
||||
const list = [
|
||||
{image_url:GFKJ, name:"国防科技大学",src:"https://www.nudt.edu.cn/"},
|
||||
{image_url:TG, name:"头歌",src:"https://www.educoder.net/"},
|
||||
{image_url:XJY, name:"长沙先进技术研究院",src:"https://www.hnjmrh.gov.cn/newweb/service/detail/305/"},
|
||||
{image_url:Beijing, name:"北京大学",src:"https://www.pku.edu.cn/"},
|
||||
{image_url:BJHKHT, name:"北京航空航天",src:"https://www.buaa.edu.cn/"},
|
||||
{image_url:ISCAS, name:"ISCAS",src:"http://www.iscas.ac.cn/"},
|
||||
{image_url:NJDX, name:"南京大学",src:"https://www.nju.edu.cn/"},
|
||||
{image_url:DD, name:"滴滴",src:"https://www.didiglobal.com/"},
|
||||
{image_url:CEC, name:"CEC",src:"https://www.cec.com.cn/"},
|
||||
{image_url:HW, name:"华为",src:"https://www.huawei.com/"},
|
||||
{image_url:ML, name:"木兰开源社区",src:"https://www.mulanos.cn/"},
|
||||
{image_url:TX, name:"腾讯",src:"https://www.tencent.com/zh-cn"},
|
||||
{image_url:KYRJLM, name:"中国开源软件推进联盟",src:"http://www.copu.org.cn/"},
|
||||
{image_url:XH, name:"中国计算机学会",src:"https://www.ccf.org.cn/"},
|
||||
{image_url:QZ, name:"openi启智",src:"https://www.openi.org.cn/"},
|
||||
{image_url:HSKY, name:"红山开源",src:"https://osredm.com/"},
|
||||
{image_url:LSLM, name:"绿色产业联盟",src:"https://www.opengcc.org/"},
|
||||
{image_url:ZC, name:"中创软件",src:"http://www.cvicse.com/"},
|
||||
{image_url:LC, name:"浪潮",src:"https://cloud.inspur.com/"},
|
||||
{image_url:YKD, name:"ucloud",src:"https://www.ucloud.cn/"}
|
||||
]
|
||||
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
vertical: true,
|
||||
verticalSwiping: true,
|
||||
autoplay:true,
|
||||
arrows:false
|
||||
};
|
||||
function FifthEdition() {
|
||||
const [ topics ,setTopics ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
// if(list.length>10){
|
||||
// Init();
|
||||
// }
|
||||
getUnit();
|
||||
},[])
|
||||
|
||||
function getUnit(){
|
||||
const url =`/topics.json`;
|
||||
Axios.get(url,{params:{
|
||||
topic_type:"cooperator",
|
||||
limit:20,
|
||||
group_size:5
|
||||
}}).then(result=>{
|
||||
if(result){
|
||||
setTopics(result.data.topics);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function Init() {
|
||||
let box = document.getElementById('scrollBox1');
|
||||
scrollUp();
|
||||
var myTimer = setInterval(scrollUp, 10);
|
||||
// 鼠标移入container 元素上 清除定时器 停止滚动
|
||||
box.onmouseover = () => {
|
||||
clearInterval(myTimer);
|
||||
}
|
||||
// 鼠标移出container 元素上 继续滚动
|
||||
// 60表示每隔60毫秒向上滚动一次
|
||||
box.onmouseout = () => {
|
||||
myTimer = setInterval(scrollUp, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function scrollUp() {
|
||||
let box = document.getElementById('scrollBox1');
|
||||
if(box){
|
||||
let con1 = document.getElementById('box1');
|
||||
if (box.scrollLeft >= con1.clientWidth) {
|
||||
box.scrollLeft = 0;
|
||||
} else {
|
||||
box.scrollLeft++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<div id={"scrollBox1"}>
|
||||
{/* <div style={{width:370*list.length+"px"}}>
|
||||
<ul className="fifthList" id="box1" style={{width:(370*list.length)/2+"px"}}>
|
||||
{
|
||||
list && list.map((i,k)=>{
|
||||
return(
|
||||
<li><a href={i.src} target="_blank"><img src={i.image_url} alt={i.name}/></a></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
{list.length > 10 &&
|
||||
<ul className="fifthList" id="box2" style={{width:(370*list.length)/2+"px"}}>
|
||||
{
|
||||
list && list.map((i,k)=>{
|
||||
return(
|
||||
<li><a href={i.src} target="_blank"><img src={i.image_url} alt={i.name}/></a></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div> */}
|
||||
{
|
||||
topics && topics.length>0 ?
|
||||
<Slider {...settings} className="unitMainSlider">
|
||||
{
|
||||
topics.map((i,k)=>{
|
||||
return(
|
||||
<div className="slickMainline">
|
||||
{
|
||||
i.map((j,k1)=>{
|
||||
return(
|
||||
<a href={j.url} target="_blank"><img src={getImageUrl(j.image)} alt=""/></a>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Slider>
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default FifthEdition;
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import React from 'react';
|
||||
import Img from './Img/gitlink.png';
|
||||
import qqImg from './Img/qq.png';
|
||||
function Footnav() {
|
||||
return(
|
||||
<div className="footEdition">
|
||||
<div className="footContent">
|
||||
<ul className="center">
|
||||
<img src={Img} alt="Gitlink（确实开源）" height="29px"/>
|
||||
<p>（确实开源）</p>
|
||||
</ul>
|
||||
<ul>
|
||||
<li className="thehead">社区</li>
|
||||
<li><a href="/">网站首页</a></li>
|
||||
{/* 关于我们 */}
|
||||
<li><a href="https://forum.trustie.net/forums/1168/detail">帮助中心</a></li>
|
||||
<li><a href="https://forum.trustie.net/">论坛交流</a></li>
|
||||
<li><a href="https://www.trustie.net/cooperation">合作伙伴</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li className="thehead">支持与服务</li>
|
||||
<li><a href="https://forgeplus.trustie.net/docs/api">API文档</a></li>
|
||||
<li><a href="https://git-scm.com">Git常用命令</a></li>
|
||||
<li><a href="https://forum.trustie.net/forums/3080/detail">DevOps使用文档</a></li>
|
||||
<li><a href='https://www.trustie.net/agreement'>服务协议</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li className="thehead">加入我们</li>
|
||||
<li className="theline">
|
||||
{/* <div className="mr50">
|
||||
<li>公众号</li>
|
||||
<img src={qqImg} alt="公众号"/>
|
||||
</div> */}
|
||||
<div>
|
||||
<li>QQ群</li>
|
||||
<div className="imgCon">
|
||||
<img src={qqImg} alt="QQ群"/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="copyrightDesc">©Copyright 2007～2021 国防科技大学GitLink团队 & IntelliDE <br/>湘ICP备 17009477号</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Footnav;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react';
|
||||
import './Index.scss';
|
||||
// import gitlink from './Img/gitlink.png';
|
||||
import { getImageUrl } from 'educoder';
|
||||
|
||||
function HeadNav({showLoginDialog,mygetHelmetapi}) {
|
||||
const register = mygetHelmetapi && mygetHelmetapi.common && mygetHelmetapi.common.register;
|
||||
const navbar = mygetHelmetapi && mygetHelmetapi.navbar;
|
||||
return(
|
||||
<div className="headNav">
|
||||
<div className="headNavDiv">
|
||||
<ul className="headlist">
|
||||
<li><img src={getImageUrl(`/${mygetHelmetapi && mygetHelmetapi.nav_logo_url}`)} alt="gitlink" height="37px" style={{marginRight:"15px"}}/></li>
|
||||
{
|
||||
navbar && navbar.length>0&&
|
||||
navbar.map((i,k)=>{
|
||||
return(
|
||||
<li style={{display:i.hidden?"none":"block"}}><a href={i.link}>{i.name}</a></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
<div>
|
||||
<a className="color-white" onClick={showLoginDialog}>登录</a>
|
||||
<a className="regBtn" href={register}>注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default HeadNav;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 535 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 470 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 632 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 342 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 730 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 461 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 877 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1018 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1018 B |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
|
|
@ -1,216 +0,0 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import Img1 from './Img/2-2-1.png';
|
||||
import ImgHead from './Img/2-2-head.png';
|
||||
import Img2 from './Img/2-2-2.png';
|
||||
import Img3 from './Img/2-2-3.png';
|
||||
import Imgring from './Img/2-2-ring.png';
|
||||
import ImgS1 from './Img/2-3-1.png';
|
||||
import ImgS2 from './Img/2-3-2.png';
|
||||
import ImgS3 from './Img/2-3-3.png';
|
||||
import ImgS4 from './Img/2-3-4.png';
|
||||
import ImgM2 from './Img/2-6-2.png';
|
||||
import ImgM4 from './Img/2-6-1.png';
|
||||
import Codeafter from './Img/codeafter.png';
|
||||
import './code.scss';
|
||||
|
||||
const code=[
|
||||
{str:<span><span className='code-green'>git remote</span> add origin https://git.trustie.net/Gitlink/Gitlink.git</span>},
|
||||
{str:<span><span className='code-red'>git push</span> -u origin master</span>},
|
||||
{str:<span><span className='code-green'>git branch</span> dev</span>},
|
||||
{str:<span><span className='code-blue'>git checkout</span> dev</span>},
|
||||
{str:<span><span className='code-green'>git add</span> .</span>},
|
||||
{str:<span><span className='code-red'>git commit</span> -m "xxx"</span>},
|
||||
{str:<span><span className='code-red'>git push</span> origin dev</span>},
|
||||
{str:<span><span className='code-blue'>git checkout</span> master</span>},
|
||||
{str:<span><span className='code-green'>git pull</span> origin master</span>},
|
||||
{str:<span><span className='code-green'>git merge</span> dev</span>},
|
||||
{str:<span><span className='code-red'>git push</span> origin master</span>}
|
||||
]
|
||||
const codes=[
|
||||
{str:<span><span className='code-blue'>latest:</span> Pulling from appleboy/drone-ssh</span>},
|
||||
{str:<span><span className='code-red'>Digest:</span>sha256:095ca4ceafcb751f1f22fe416057d3e2a6302f7b1f7011b17010973cb6bbdd9f</span>},
|
||||
{str:<span>Status:Image is up to date for appleboy/drone-ssh:latest</span>},
|
||||
{str:<span><span className='code-green'>======CMD======</span></span>},
|
||||
{str:<span><span className='code-green'>echo ====暂停容器开始======= </span></span>},
|
||||
{str:<span><span className='code-red'>docker</span> rm -f mo-test</span>},
|
||||
{str:<span><span className='code-red'>docker</span> rmi mo-test:1.0</span>},
|
||||
{str:<span><span className='code-blue'>cd</span> /opt/demo</span>},
|
||||
{str:<span><span className='code-green'>echo ====开始部署=======</span></span>},
|
||||
{str:<span><span className='code-red'>docker </span>build -t mo-test:1.0 .</span>},
|
||||
{str:<span><span className='code-red'>docker </span>run -d -p 8080:8080 --name mo-test mo-test:1.0</span>},
|
||||
{str:<span><span className='code-green'>echo ====部署成功======</span></span>},
|
||||
{str:<span><span className='code-green'>======END======</span></span>},
|
||||
]
|
||||
|
||||
function SecondEdition({setValue}) {
|
||||
useEffect(()=>{
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return ComponentWillUnmount;
|
||||
},[])
|
||||
function ComponentWillUnmount() {
|
||||
window.removeEventListener("scroll",handleScroll);
|
||||
}
|
||||
|
||||
const [ hadoop , setHadoop ] = useState(false);
|
||||
const [ highDevops , setHighDevops ] = useState(false);
|
||||
const [ multipleAnalyse , setMultipleAnalyse ] = useState(false);
|
||||
const [ multidimensional , setMultidimensional ] = useState(false);
|
||||
|
||||
const [ oneStop , setOneStop ] = useState(false);
|
||||
|
||||
function handleScroll() {
|
||||
let clientHeight = document.documentElement.clientHeight; //可视区域高度
|
||||
let scrollTop = document.documentElement.scrollTop; //滚动条滚动高度
|
||||
let f = checkPosi("hadoop",clientHeight,scrollTop);
|
||||
if(f){
|
||||
setValue("#hadoop");
|
||||
setHadoop(true);
|
||||
}else{
|
||||
setHadoop(false);
|
||||
}
|
||||
let f1 = checkPosi("oneStop",clientHeight,scrollTop);
|
||||
if(f1){
|
||||
setValue("#oneStop");
|
||||
setOneStop(true);
|
||||
}else{
|
||||
setOneStop(false);
|
||||
setOneStop(false);
|
||||
}
|
||||
let f3 = checkPosi("highDevops",clientHeight,scrollTop);
|
||||
if(f3){
|
||||
setValue("#highDevops");
|
||||
setHighDevops(true);
|
||||
}else{
|
||||
setHighDevops(false);
|
||||
setHighDevops(false);
|
||||
}
|
||||
let f4 = checkPosi("multipleAnalyse",clientHeight,scrollTop);
|
||||
if(f4){
|
||||
setValue("#multipleAnalyse");
|
||||
setMultipleAnalyse(true);
|
||||
}else{
|
||||
setMultipleAnalyse(false);
|
||||
setMultipleAnalyse(false);
|
||||
}
|
||||
let f5 = checkPosi("multidimensional",clientHeight,scrollTop);
|
||||
if(f5){
|
||||
setValue("#multidimensional");
|
||||
setMultidimensional(true);
|
||||
}else{
|
||||
setMultidimensional(false);
|
||||
setMultidimensional(false);
|
||||
}
|
||||
}
|
||||
|
||||
function checkPosi(ele,clientHeight,scrollTop) {
|
||||
if(document.getElementById(ele)){
|
||||
var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
|
||||
var b = document.getElementById(ele).clientHeight + (clientHeight/4);
|
||||
if(a>0 || a<-b){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return(
|
||||
<div className="secondEditionContent">
|
||||
<div className="hadoop" id="hadoop">
|
||||
<div className="hadoopCon">
|
||||
<div className="descBox">
|
||||
<p className="desc1">分布式协作开发</p>
|
||||
<p className="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
|
||||
<p className="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p>
|
||||
</div>
|
||||
<div className={hadoop ? "hadoopCode activeCode" :"hadoopCode"}>
|
||||
{
|
||||
code.map((i,k)=>{
|
||||
return(
|
||||
<li><pre className="word-item" style={{animationDelay: `${k * 0.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
<img src={Codeafter} alt="运行结果" className={"activeImg"}/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="hadoopdesc">让您的项目在这里健康、快速的成长！</p>
|
||||
</div>
|
||||
<div className={oneStop ? "oneStop activeCode" :"oneStop"} id="oneStop">
|
||||
<div className={"oneStopContent"}>
|
||||
<div className={"osLeftMain"}>
|
||||
<img src={Img1} alt="" width="520px" className="osleftPosi"/>
|
||||
<img src={ImgHead} alt="" width="213px" style={{marginLeft:"-12px"}}/>
|
||||
<img src={Img2} alt="" width="653px" className="osleftPosi1"/>
|
||||
<img src={Img3} alt="" width="367px" className="osleftPosi2"/>
|
||||
</div>
|
||||
<div className="osRightMain">
|
||||
<p className="osRightTitle">一站式过程管理</p>
|
||||
<p>提供<span>疑修（Issue）、里程碑、通知提醒、标签归档</span>等多样化任务管理工具，支持各类开发任务的发布、指派与跟踪；</p>
|
||||
<p>同时提供<span>在线Wiki文档、组织多粒度管理</span>等功能，为您搭建一站式的项目过程管理环境；</p>
|
||||
<p><span>让您的团队协作更高效、过程更透明！</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<img src={Imgring} alt="" height="83px" className="imgring"/>
|
||||
</div>
|
||||
<div className={highDevops ? "highDevops activeCode" : "highDevops"} id="highDevops">
|
||||
<div className="highDoTitle">
|
||||
<span>高效流水线运维</span>
|
||||
</div>
|
||||
<div className="highDoSubtitle">
|
||||
融合DevOps思想，提供轻量级的工作流引擎（Engine），
|
||||
<span>打通编码、测试、构建、部署</span>等开发运维环节；支持
|
||||
<span>自定义配置、代码静态扫描、构建自动触发、容器镜像托管</span>等功能，同时支持接入第三方运维工具。
|
||||
</div>
|
||||
<div className="highDoContent">
|
||||
<div>
|
||||
<img src={ImgS1} alt="" width="794px"/>
|
||||
<div style={{marginBottom:'74px',marginTop:"25px",position:"relative"}}>
|
||||
<img src={ImgS2} alt="" width="520px"/>
|
||||
{/* <div className="highCodes">
|
||||
{
|
||||
codes.map((i,k)=>{
|
||||
return(
|
||||
<li><pre className="word-item" style={{animationDelay: `${k * 0.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div> */}
|
||||
</div>
|
||||
<img src={ImgS3} alt="" width="427px" className="highImg2"/>
|
||||
<img src={ImgS4} alt="" width="413px" className="highImg1"/>
|
||||
</div>
|
||||
<p className="highDoBottondesc">让您的代码更加快速、可靠地形成高质量的产品！</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={multipleAnalyse ? "multipleAnalyse activeCode":"multipleAnalyse"} id="multipleAnalyse">
|
||||
<span className="title">多层次代码分析</span>
|
||||
<div className="maContent"></div>
|
||||
<p className="desc">提供软件软代码和芯片RTL代码的溯源分析、文件级和组件级许可证识别及风险分析、输入性开源漏洞检测和加固建议，支持分析结果的多层次可视化展示。</p>
|
||||
</div>
|
||||
<div className={"multidimensional"} style={{opacity:multidimensional?"1":"0.3"}}>
|
||||
<div style={{height:"168px"}}></div>
|
||||
<div className={multidimensional ? "activeCode":""} id="multidimensional">
|
||||
<div className={"multidimensinalhalf"}>
|
||||
<div>
|
||||
<p className="halfTitle">多维度用户画像</p>
|
||||
<p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数据，</span>搭建多维度用户画像评估系统；</p>
|
||||
</div>
|
||||
<div style={{width:"820px",marginLeft:"34px"}}>
|
||||
<img src={ImgM4} alt="" width="820px" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="multidimensinalPart">
|
||||
<div style={{width:"614px",marginRight:"40px"}}>
|
||||
<img src={ImgM2} alt="" width="614px" />
|
||||
</div>
|
||||
<div>
|
||||
<p><span>提供</span>开发活动统计、贡献度日历、用户能力建模、角色与专业定位分析<span>等功能。</span></p>
|
||||
<p>让您在个人主页展示开发动态与创新能力！</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default SecondEdition
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
import React,{ useState , useEffect , useMemo } from 'react';
|
||||
import { Spin , Skeleton } from 'antd';
|
||||
import T311 from './Img/3-1-1.png';
|
||||
import T312 from './Img/3-1-2.png';
|
||||
import T321 from './Img/3-2-1.png';
|
||||
import T322 from './Img/3-2-2.png';
|
||||
import T331 from './Img/3-3-1.png';
|
||||
import T332 from './Img/3-3-2.png';
|
||||
import T341 from './Img/3-4-1.png';
|
||||
import T342 from './Img/3-4-2.png';
|
||||
import bg3 from './Img/3-1.png';
|
||||
import bg32 from './Img/3-2.png';
|
||||
import bg33 from './Img/3-3.png';
|
||||
import bg34 from './Img/3-4.png';
|
||||
|
||||
import './Index.scss';
|
||||
import Axios from 'axios';
|
||||
|
||||
function ThirdEdition() {
|
||||
const [ active , setActive ] = useState(1);
|
||||
const [ isSpin , setIsSpin ] = useState(true);
|
||||
const [ flag , setFlag ] = useState(true);
|
||||
const [ list1, setList1 ] = useState([]);
|
||||
const [ list2, setList2 ] = useState([]);
|
||||
const [ list3, setList3 ] = useState([]);
|
||||
const [ list4, setList4 ] = useState([]);
|
||||
|
||||
const doubleFlag = useMemo(()=>{
|
||||
return flag;
|
||||
},[flag])
|
||||
|
||||
useEffect(()=>{
|
||||
let box = document.getElementById('thirdUl');
|
||||
var myTimer = setTimeout(intervalActive, 2500);
|
||||
box.onmouseover = () => {
|
||||
clearTimeout(myTimer);
|
||||
setFlag(false);
|
||||
}
|
||||
box.onmouseleave = () => {
|
||||
myTimer = setTimeout(intervalActive, 2500);
|
||||
setFlag(true);
|
||||
}
|
||||
},[active,flag])
|
||||
|
||||
function intervalActive() {
|
||||
if(doubleFlag){
|
||||
if(active < 4){
|
||||
let i = active + 1;
|
||||
setActive(i);
|
||||
}else{
|
||||
setActive(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
if(active){
|
||||
getList(active);
|
||||
}
|
||||
},[active])
|
||||
|
||||
function getList(a) {
|
||||
let params = a === 1 ? "activity_forum" : a===2 ? "excellent_project" : a=== 3 ? "pinned_forum" : "experience_forum";
|
||||
if(a===1 && (list1 && list1.length>0)){return}
|
||||
if(a===2 && (list2 && list2.length>0)){return}
|
||||
if(a===3 && (list3 && list3.length>0)){return}
|
||||
if(a===4 && (list4 && list4.length>0)){return}
|
||||
setIsSpin(true);
|
||||
const url = `/topics.json?topic_type=${params}`;
|
||||
Axios.get(url,{
|
||||
params:{
|
||||
limit:5
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
let l = result.data.topics;
|
||||
if(a===1){
|
||||
setList1(l);
|
||||
}else if(a===2){
|
||||
setList2(l);
|
||||
}else if(a===3){
|
||||
setList3(l);
|
||||
}else{
|
||||
setList4(l);
|
||||
}
|
||||
setIsSpin(false);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="thirdEdition">
|
||||
<p className="title">开发者的家园</p>
|
||||
<p className="subtitle">一个实现群智激发与汇聚，产学研联合面向协同创新的开源社区</p>
|
||||
<div id="thirdUl">
|
||||
<ul className="thirdUl">
|
||||
<li className={active===1?"active":""}onClick={()=>{setFlag(false);setActive(1)}}>
|
||||
<div className="hoverli1">
|
||||
<img src={T311} alt="" width="38px" style={{top:"8px",left:"10px"}}/>
|
||||
<img src={T312} alt="" width="34px"/>
|
||||
</div>
|
||||
<span>平台动态</span>
|
||||
</li>
|
||||
<li className={active===2?"active":""}onClick={()=>{setFlag(false);setActive(2)}}>
|
||||
<div className="hoverli2">
|
||||
<img src={T321} alt="" width="32px" style={{left:"8px"}}/>
|
||||
<img src={T322} alt="" width="26px" style={{top:"8px"}}/>
|
||||
</div>
|
||||
<span>优秀仓库</span>
|
||||
</li>
|
||||
<li className={active===3?"active":""}onClick={()=>{setFlag(false);setActive(3)}}>
|
||||
<div className="hoverli3">
|
||||
<img src={T331} alt="" width="33px" style={{right:"3px",top:"8px"}}/>
|
||||
<img src={T332} alt="" width="29px" style={{top:"8px"}}/>
|
||||
</div>
|
||||
<span>精选文章</span>
|
||||
</li>
|
||||
<li className={active===4?"active":""}onClick={()=>{setFlag(false);setActive(4)}}>
|
||||
<div className="hoverli4">
|
||||
<img src={T341} alt="" width="42px"/>
|
||||
<img src={T342} alt="" width="26px" style={{top:"11px",left:"7px"}}/>
|
||||
</div>
|
||||
<span>经验分享</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="thirdLists">
|
||||
<img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
|
||||
<div className="listbox">
|
||||
<p className="listTitle">
|
||||
{active === 1 ? "GitLink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏"
|
||||
: active===2 ? "GitLink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果"
|
||||
:active===3 ? "GitLink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新"
|
||||
:"GitLink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"}
|
||||
</p>
|
||||
<div style={{minHeight:"260px"}}>
|
||||
{
|
||||
active === 1 &&
|
||||
<React.Fragment>
|
||||
{
|
||||
list1 && list1.length > 0 ? list1.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<a href={i.url} target="_blank">{i.title}</a>
|
||||
<span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
|
||||
<span>{i.created_time && i.created_time.split(" ")[0]}</span>
|
||||
</li>
|
||||
)
|
||||
}):""
|
||||
}
|
||||
{
|
||||
list1 && list1.length === 0 && <Skeleton />
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
{
|
||||
active === 2 &&
|
||||
<React.Fragment>
|
||||
{
|
||||
list2 && list2.length > 0? list2.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<a href={i.url} target="_blank">{i.title}</a>
|
||||
<span className="listboxcount" style={{marginRight:"40px"}}><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
|
||||
{/* {i.time} */}
|
||||
</li>
|
||||
)
|
||||
}):""
|
||||
}
|
||||
{
|
||||
list2 && list2.length === 0 && <Skeleton />
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
{
|
||||
active === 3 &&
|
||||
<React.Fragment>
|
||||
{
|
||||
list3 && list3.length > 0 ? list3.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<a href={i.url} target="_blank">{i.title}</a>
|
||||
<span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
|
||||
<span>{i.created_time && i.created_time.split(" ")[0]}</span>
|
||||
</li>
|
||||
)
|
||||
}):""
|
||||
}
|
||||
{
|
||||
list3 && list3.length === 0 && <Skeleton />
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
{
|
||||
active === 4 &&
|
||||
<React.Fragment>
|
||||
{
|
||||
list4 && list4.length > 0 ? list4.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<a href={i.url} target="_blank">{i.title}</a>
|
||||
<span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
|
||||
<span>{i.created_time && i.created_time.split(" ")[0]}</span>
|
||||
</li>
|
||||
)
|
||||
}):""
|
||||
}
|
||||
{
|
||||
list4 && list4.length === 0 && <Skeleton />
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default ThirdEdition;
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import axios from 'axios';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import Left from './Img/left.png';
|
||||
import Right from './Img/right.png';
|
||||
|
||||
|
||||
let setting={
|
||||
dots:true,
|
||||
infinite: true,
|
||||
speed: 2000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover:true,
|
||||
autoplaySpeed:5000,
|
||||
pauseOnFocus:true,
|
||||
autoplay:true,
|
||||
arrows:true,
|
||||
prevArrow:<button type='button' class='slick-prev slick-arrow'><img src={Left} width="70px" alt=""/></button>,
|
||||
nextArrow:<button type='button' class='slick-prev slick-arrow'><img src={Right} width="70px" alt=""/></button>
|
||||
}
|
||||
function TopEdition({register,current_user}) {
|
||||
|
||||
const [ bannerList , setBannerList ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
getBanner();
|
||||
},[])
|
||||
|
||||
function getBanner() {
|
||||
const url = `/topics.json?topic_type=banner`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
limit:4
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setBannerList(result.data.topics);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
return(
|
||||
<Slider {...setting}>
|
||||
{
|
||||
bannerList && bannerList.length > 0 ?
|
||||
bannerList.map((i,k)=>{
|
||||
return(
|
||||
<div className={`regform`}>
|
||||
{/* style={{backgroundImage:`url(${getImageUrl(i.image)})`}} */}
|
||||
<div>
|
||||
<img src={getImageUrl(i.image)} alt="" height="100%"/>
|
||||
{
|
||||
k +1 === bannerList.length && (!(current_user && current_user.login)) ?
|
||||
<p className="regPrg"><a href={register}>立即注册</a></p>
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
:
|
||||
""
|
||||
}
|
||||
</Slider>
|
||||
)
|
||||
}
|
||||
export default TopEdition;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
.hadoopCode{
|
||||
margin-left: 32px;
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
padding:18px 20px;
|
||||
flex: 1;
|
||||
margin-top: 60px;
|
||||
position: relative;
|
||||
&>img{
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -50px;
|
||||
width: 805px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
color: #E1E1E1;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
word-break: break-all;
|
||||
overflow: initial ;
|
||||
.codenum{
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
text-align: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.code-green{
|
||||
color: #00FA30;
|
||||
}
|
||||
.code-red{
|
||||
color: #FF5058;
|
||||
}
|
||||
.code-blue{
|
||||
color: #05CFC8;
|
||||
}
|
||||
}
|
||||
.highCodes{
|
||||
position: absolute;
|
||||
top:0px;
|
||||
right:0px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding:40px 30px;
|
||||
color: #E1E1E1;
|
||||
}
|
||||
.activeCode{
|
||||
.word-item{
|
||||
animation: show .2s 1 forwards;
|
||||
}
|
||||
&>img.activeImg{
|
||||
right: 0px;
|
||||
bottom: -20px;
|
||||
opacity: 1;
|
||||
width: 705px;
|
||||
transition: 1s;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
}
|
||||
.word-item {
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes show {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,167 +1,153 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import "./Index.scss";
|
||||
import TopEdition from './TopEdition';
|
||||
import ThirdEdition from './ThirdEdition';
|
||||
import { Anchor } from 'antd';
|
||||
import F41 from './Img/4-1.png';
|
||||
import F42 from './Img/4-2.png';
|
||||
import F43 from './Img/4-3.png';
|
||||
import F44 from './Img/4-4.png';
|
||||
import SecondEdition from './SecondEdition';
|
||||
import FifthEdition from './FifthEdition';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
|
||||
import Axios from 'axios';
|
||||
import { isMobile } from 'educoder';
|
||||
import './index.scss';
|
||||
|
||||
function Index(props) {
|
||||
const [ value , setValue ] = useState("");
|
||||
const [ flag , setFlag ] = useState(true);
|
||||
import FirstSection from './FirstSection';
|
||||
import SecondSection from './SecondSection';
|
||||
import ThirdSection from './ThirdSection';
|
||||
import FourthSection from './FourthSection';
|
||||
import FifthSection from './FifthSection';
|
||||
import SixthSection from './SixthSection';
|
||||
import SeventhSection from './SeventhSection';
|
||||
import Footer from './Footer';
|
||||
|
||||
const [ bannerTab , setBannerTab ] = useState(undefined);
|
||||
const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register;
|
||||
|
||||
const { current_user } = props;
|
||||
useEffect(()=>{
|
||||
window.addEventListener("scroll",scrollListener);
|
||||
getTab();
|
||||
return ComponentWillUnmount;
|
||||
},[])
|
||||
let isHuawei = (/honor|huawei/i.test(navigator.userAgent.toLowerCase()));
|
||||
function HomePage({ history }) {
|
||||
|
||||
function ComponentWillUnmount() {
|
||||
window.removeEventListener("scroll",scrollListener);
|
||||
}
|
||||
|
||||
function getTab() {
|
||||
const url = `/topics.json?topic_type=card`;
|
||||
Axios.get(url,{
|
||||
params:{
|
||||
limit:3
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setBannerTab(result.data.topics);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function scrollListener(event) {
|
||||
|
||||
let third = document.getElementById("thirdContent").offsetTop;
|
||||
let top = document.documentElement.scrollTop + 60;
|
||||
if(top>= third)
|
||||
{
|
||||
setFlag(false)
|
||||
}else{
|
||||
setFlag(true)
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", scrollListener, false);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", scrollListener, false);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
function changeActive(params) {
|
||||
if(params){
|
||||
setValue(params);
|
||||
let h = params.split("#")[1];
|
||||
let t = document.getElementById(h).offsetTop;
|
||||
document.documentElement.scrollTop = t-100;
|
||||
}else{
|
||||
setValue("");
|
||||
const [first, setFirst] = useState(true);
|
||||
const [second, setSecond] = useState(isMobile);
|
||||
const [third, setThird] = useState(false || isHuawei);
|
||||
const [fourth, setFourth] = useState(false || isHuawei);
|
||||
const [fifth, setFifth] = useState(false || isHuawei);
|
||||
const [sixth, setSixth] = useState(false || isHuawei);
|
||||
|
||||
|
||||
let settings = JSON.parse(localStorage.chromesetting);
|
||||
let main_web_site_url = settings.main_web_site_url;
|
||||
|
||||
|
||||
function scrollListener() {
|
||||
let clientHeight = document.body.clientHeight;
|
||||
let clientWidth = document.body.clientWidth;
|
||||
// let secondSection = document.querySelector(".home-second-section").offsetTop;
|
||||
// let thirdSection = document.querySelector(".home-third-section").offsetTop;
|
||||
// let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
|
||||
// let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
|
||||
// let sixthSection = document.querySelector(".home-sixth-section").offsetTop;
|
||||
// let seventhSection = document.querySelector(".home-seventh-section").offsetTop;
|
||||
let secondSection = document.getElementById("home-second-section").offsetTop;
|
||||
let thirdSection = document.getElementById("home-third-section").offsetTop;
|
||||
let fourthSection = document.getElementById("home-fourth-section").offsetTop;
|
||||
let fifthSection = document.getElementById("home-fifth-section").offsetTop;
|
||||
let sixthSection = document.getElementById("home-sixth-section").offsetTop;
|
||||
let seventhSection = document.getElementById("home-seventh-section").offsetTop;
|
||||
|
||||
let top = document.documentElement.scrollTop;
|
||||
|
||||
|
||||
if (top >= clientHeight - 300) {
|
||||
setFirst(false);
|
||||
} else {
|
||||
setFirst(true);
|
||||
}
|
||||
|
||||
if (clientWidth > 1100) {
|
||||
// 第二个动效
|
||||
if (top >= secondSection - clientHeight * 0.8 && top < thirdSection) {
|
||||
setSecond(true);
|
||||
} else {
|
||||
setSecond(false);
|
||||
}
|
||||
} else {
|
||||
// 第二个动效
|
||||
if (top >= secondSection - clientHeight && top < thirdSection) {
|
||||
setSecond(true);
|
||||
} else {
|
||||
setSecond(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 第三个动效
|
||||
if (top >= thirdSection - clientHeight && top < fourthSection) {
|
||||
setThird(true);
|
||||
} else {
|
||||
setThird(false);
|
||||
}
|
||||
|
||||
// 第四个动效
|
||||
if (top >= fourthSection - clientHeight && top < fifthSection) {
|
||||
setFourth(true);
|
||||
} else {
|
||||
setFourth(false);
|
||||
}
|
||||
|
||||
// 第五个动效
|
||||
if (top >= fifthSection - clientHeight && top < sixthSection) {
|
||||
setFifth(true);
|
||||
} else {
|
||||
setFifth(false);
|
||||
}
|
||||
|
||||
// 第六个动效
|
||||
if (top >= sixthSection - clientHeight && top < seventhSection - 100) {
|
||||
setSixth(true);
|
||||
} else {
|
||||
setSixth(false);
|
||||
}
|
||||
|
||||
if(isHuawei){
|
||||
setFourth(true);
|
||||
setSixth(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="homePage">
|
||||
<div className="topEdition">
|
||||
{/* <HeadNav {...props}/> */}
|
||||
<TopEdition register={register} current_user={current_user}/>
|
||||
{
|
||||
bannerTab && bannerTab.length > 0 ?
|
||||
<ul className="topEditionUl">
|
||||
{
|
||||
bannerTab.map((i,k)=>{
|
||||
return(
|
||||
<a href={i.url} target="_blank" className="font-18">
|
||||
<li>
|
||||
{i.title}
|
||||
</li>
|
||||
</a>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
:
|
||||
<ul className="topEditionUl">
|
||||
<a href="https://forum.trustie.net/forums/4666/detail" target="_blank" className="font-18">
|
||||
<li>
|
||||
CCF开源发展委员会首批执行委员名单发布
|
||||
</li>
|
||||
</a>
|
||||
<a href="https://forgeplus.trustie.net/Gitlink/forgeplus" target="_blank" className="font-18">
|
||||
<li>
|
||||
平台精选仓库：GitLink/GitLink
|
||||
</li>
|
||||
</a>
|
||||
<a href="https://forum.trustie.net/forums/4663/detail" target="_blank" className="font-18">
|
||||
<li>
|
||||
OpenHarmony系统介绍及赛题说明
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
}
|
||||
|
||||
|
||||
<div id="home-first-section" className="home-first-section">
|
||||
<FirstSection first={first} />
|
||||
</div>
|
||||
|
||||
<div className="secondEdition">
|
||||
<p className="theTitle">GitLink，新一代开源创新服务平台</p>
|
||||
{
|
||||
flag &&
|
||||
<Anchor>
|
||||
<li onClick={()=>changeActive("#hadoop")} className={value === "#hadoop"?"active":""}><a>分布式协作开发</a></li>
|
||||
<li onClick={()=>changeActive("#oneStop")} className={value === "#oneStop"?"active":""}><a>一站式过程管理</a></li>
|
||||
<li onClick={()=>changeActive("#highDevops")} className={value === "#highDevops"?"active":""}><a>高效流水线运维</a></li>
|
||||
<li onClick={()=>changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}><a>多层次代码分析</a></li>
|
||||
<li onClick={()=>changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}><a>多维度用户画像</a></li>
|
||||
</Anchor>
|
||||
}
|
||||
<SecondEdition {...props} setValue={setValue}/>
|
||||
</div>
|
||||
<div id="thirdContent">
|
||||
<ThirdEdition />
|
||||
|
||||
<div id="home-second-section" className="home-second-section">
|
||||
<SecondSection second={second} main_web_site_url={main_web_site_url} />
|
||||
</div>
|
||||
|
||||
<div className="forthEdition">
|
||||
<p className="theTitle">加入GitLink，和社区伙伴们一起踏上开源创新的辉煌旅程！</p>
|
||||
<div style={{marginBottom:"80px"}}>
|
||||
{ !(current_user && current_user.login) && <a className="qulikyreg" href={register}>立即注册</a> }
|
||||
</div>
|
||||
<ul className="forthUl">
|
||||
<li>
|
||||
<img src={F41} alt="" width={"100px"}/>
|
||||
<span className="forthtitle">发现</span>
|
||||
<span className="forthsubtitle">探索丰富优质的开发资源</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src={F42} alt="" width={"101px"}/>
|
||||
<span className="forthtitle">加入</span>
|
||||
<span className="forthsubtitle">寻找志同道合的协作伙伴</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src={F43} alt="" width={"104px"}/>
|
||||
<span className="forthtitle">合作</span>
|
||||
<span className="forthsubtitle">开启开放共享的协同之旅</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src={F44} alt="" width={"87px"}/>
|
||||
<span className="forthtitle">贡献</span>
|
||||
<span className="forthsubtitle">书写开源创新的精彩成就</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="home-third-section" className="home-third-section">
|
||||
<ThirdSection third={third} />
|
||||
</div>
|
||||
|
||||
<div className="fifthEdition">
|
||||
<p className="title">开源生态</p>
|
||||
<p className="subtitle">GitLink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
|
||||
<FifthEdition />
|
||||
<div id="home-fourth-section" className="home-fourth-section">
|
||||
<FourthSection fourth={fourth} history={history} />
|
||||
</div>
|
||||
|
||||
<div id="home-fifth-section" className="home-fifth-section">
|
||||
<FifthSection fifth={fifth} history={history} />
|
||||
</div>
|
||||
|
||||
<div id="home-sixth-section" className="home-sixth-section">
|
||||
<SixthSection sixth={sixth} main_web_site_url={main_web_site_url} />
|
||||
</div>
|
||||
|
||||
<div id="home-seventh-section" className="home-seventh-section">
|
||||
<SeventhSection main_web_site_url={main_web_site_url} />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default TPMIndexHOC(Index);
|
||||
|
||||
export default TPMIndexHOC(HomePage, { noFooter: true });
|
||||
|
|
|
|||
1414
src/home/index.scss
1414
src/home/index.scss
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue