forked from Gitlink/forgeplus-react
组织模块-部分前端页面
This commit is contained in:
parent
6f08cf4a73
commit
49dd7dcde0
|
|
@ -538,10 +538,6 @@ a:hover.leftnav-box-inner .btn-cir {
|
|||
|
||||
/*右侧头部*/
|
||||
|
||||
/*右侧内容*/
|
||||
.content {
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
/* tab */
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import './Component.scss';
|
||||
|
||||
export default (({img , title, desc , rightBtn})=>{
|
||||
return(
|
||||
<div className="cards">
|
||||
<div className="img"><img src={img} alt=""/></div>
|
||||
<div className="content">
|
||||
<p className="titles">
|
||||
<span>{title}</span>
|
||||
{rightBtn}
|
||||
</p>
|
||||
<div className="desc">
|
||||
{desc}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -8,3 +8,59 @@
|
|||
margin:0px!important;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
// Cards
|
||||
.cards{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:20px 34px;
|
||||
background-color: #fff;
|
||||
margin:18px 0px;
|
||||
.img{
|
||||
margin-right: 20px;
|
||||
width: 190px;
|
||||
height: 90px;
|
||||
border:1px solid rgba(238,238,238,1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
flex:1;
|
||||
width: 0;
|
||||
.titles{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px!important;
|
||||
align-items: center;
|
||||
&>span{
|
||||
font-size:18px ;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs
|
||||
.tabsStyle{
|
||||
.ant-tabs-bar.ant-tabs-top-bar{
|
||||
padding-left: 35px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.ant-tabs-nav .ant-tabs-tab{
|
||||
padding:19px 0px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.ant-tabs-ink-bar{
|
||||
width:25px!important;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export default (({fork,parise})=>{
|
||||
const DivStyle = styled.div`{
|
||||
display:flex;
|
||||
align-item:center;
|
||||
}`;
|
||||
const SpanStylefork = styled.span`{
|
||||
display:flex;
|
||||
align-item:center;
|
||||
margin-left:30px;
|
||||
padding:0px 12px;
|
||||
border-radius:13px;
|
||||
background-color:#EBF4FE;
|
||||
height:24px;
|
||||
line-height:24px;
|
||||
font-size:12px;
|
||||
}`;
|
||||
const SpanStyleparise = styled.span`{
|
||||
display:flex;
|
||||
align-item:center;
|
||||
margin-left:30px;
|
||||
padding:0px 12px;
|
||||
border-radius:13px;
|
||||
background-color:#FFF3DC;
|
||||
height:24px;
|
||||
line-height:24px;
|
||||
font-size:12px;
|
||||
}`;
|
||||
return(
|
||||
<DivStyle>
|
||||
{
|
||||
fork || fork ===0 ? <SpanStylefork><i className="iconfont icon-fork font-15 mr3" style={{color:"#1B8FFF"}}></i>fork({fork})</SpanStylefork>:""
|
||||
}
|
||||
{
|
||||
parise || parise ===0?<SpanStyleparise><i className="iconfont icon-guanzhu font-14 mr3" style={{color:"#FFA802"}}></i>点赞({parise})</SpanStyleparise>:""
|
||||
}
|
||||
</DivStyle>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import React from 'react';
|
||||
import './Component.scss';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Img = styled.img`{
|
||||
border-radius:50%;
|
||||
width:50px;
|
||||
height:50px;
|
||||
margin-right:14px;
|
||||
}`
|
||||
const Name = styled.div`{
|
||||
color:#5091FF;
|
||||
font-size:16px;
|
||||
height:22px;
|
||||
line-height:22px;
|
||||
margin-bottom:7px;
|
||||
}`
|
||||
const Time = styled.div`{
|
||||
color:#888;
|
||||
font-size:12px;
|
||||
height:16px;
|
||||
line-height:16px;
|
||||
margin-bottom:9px;
|
||||
display:flex;
|
||||
align-item:center;
|
||||
}`
|
||||
const I = styled.i`{
|
||||
font-size:13px!important;
|
||||
color:#60B25E;
|
||||
margin-right:2px;
|
||||
}`
|
||||
const FocusBtn = styled.a`{
|
||||
display:inline-block;
|
||||
height:30px;
|
||||
line-height:26px;
|
||||
padding:0px 12px;
|
||||
background-color:#fafafa;
|
||||
border:1px solid #eee;
|
||||
border-radius:2px;
|
||||
color:#888!important;
|
||||
}`
|
||||
const Ifocused = styled.i`{
|
||||
font-size:16px!important;
|
||||
color:#FFA802;
|
||||
margin-right:4px;
|
||||
}`
|
||||
const Ifocus = styled.i`{
|
||||
font-size:16px!important;
|
||||
color:#BBBBBB;
|
||||
margin-right:4px;
|
||||
}`
|
||||
const Div = styled.div`{
|
||||
margin-bottom: 18px;
|
||||
padding:20px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border:1px solid #eee;
|
||||
}`
|
||||
export default (({img,name,time, focusStatus})=>{
|
||||
return(
|
||||
<Div>
|
||||
<Img src={img}/>
|
||||
<div className="m-infos">
|
||||
<Name>{name}</Name>
|
||||
<Time><I className="iconfont icon-shijian"></I>加入时间:{time}</Time>
|
||||
{
|
||||
focusStatus ?
|
||||
<FocusBtn><Ifocused className="iconfont icon-shixing"></Ifocused>已关注</FocusBtn> :
|
||||
<FocusBtn><Ifocus className="iconfont icon-kongxing"></Ifocus>关注</FocusBtn>
|
||||
}
|
||||
</div>
|
||||
</Div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import './Component.scss';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
export default (({ nav, index , onChange , children })=>{
|
||||
return(
|
||||
nav && nav.length > 0 ?
|
||||
<Tabs className="tabsStyle" animated={false} activeKey={index} onChange={onChange}>
|
||||
{
|
||||
nav.map((item,key)=>{
|
||||
return(
|
||||
<TabPane tab={item} key={`${key}`}>{children}</TabPane>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Tabs>:""
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const Banner = styled.div`{
|
||||
padding:20px 25px;
|
||||
color:#333;
|
||||
font-size:18px;
|
||||
border-bottom:1px solid #eee;
|
||||
background-color:#fff;
|
||||
border-radius:5px 5px 0px 0px;
|
||||
}`
|
||||
export const AlignCenterBetween = styled.div`{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
padding: 14px 14px 14px 20px;
|
||||
justify-content: space-between;
|
||||
border-bottom:1px solid #eee;
|
||||
}`
|
||||
export const AlignCenter = styled.div`{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}`
|
||||
// 左右结构
|
||||
export const Box = styled.div`{
|
||||
display:flex;
|
||||
align-item:flex-start;
|
||||
}`
|
||||
export const Long = styled.div`{
|
||||
width:72%;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
export const Short = styled.div`{
|
||||
width:28%;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
export const Gap = styled.div`{
|
||||
padding-left:20px;
|
||||
box-sizing:border-box;
|
||||
}`
|
||||
export const WhiteBack = styled.div`{
|
||||
background-color:#fff;
|
||||
border-radius:5px;
|
||||
}`
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Spin, Tooltip } from 'antd';
|
||||
import { Link, Route, Switch, withRouter } from 'react-router-dom';
|
||||
import { Link, Route, Switch } from 'react-router-dom';
|
||||
|
||||
import '../css/index.css'
|
||||
import './list.css';
|
||||
|
|
@ -605,4 +605,4 @@ class Detail extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default withRouter(Detail);
|
||||
export default Detail;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
|
||||
|
||||
export default (({ name , count , bottom , children })=>{
|
||||
return(
|
||||
<div className="box">
|
||||
<div className="head">
|
||||
<span>{name}</span>
|
||||
<span>{count}<i className="iconfont icon-youjiantou font-12 ml3"></i></span>
|
||||
</div>
|
||||
<div className="content">
|
||||
{children}
|
||||
</div>
|
||||
{
|
||||
bottom ?
|
||||
<div className="foot">
|
||||
{bottom}
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Route, Switch } from "react-router-dom";
|
||||
import Loadable from "react-loadable";
|
||||
import Loading from "../../Loading";
|
||||
|
||||
import Cards from '../Component/Cards';
|
||||
|
||||
import './Index.scss';
|
||||
|
||||
const DetailIndex = Loadable({
|
||||
loader: () => import("./List"),
|
||||
loading: Loading,
|
||||
});
|
||||
export default ((props)=>{
|
||||
return(
|
||||
<div className="teamDetail">
|
||||
<Cards
|
||||
title="组织名称"
|
||||
desc="组织名称组织名称组织名称组织名称组织名称"
|
||||
rightBtn={<a className="color-blue">设置<i className="iconfont icon-shezhi2 ml3"></i></a>}
|
||||
img={`https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4193840146,2109186388&fm=26&gp=0.jpg`}
|
||||
/>
|
||||
<Switch {...props}>
|
||||
<Route
|
||||
path="/organize/:organizeId"
|
||||
render={(props) => {
|
||||
return <DetailIndex {...props} />
|
||||
}}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import React from 'react';
|
||||
import Cards from '../Component/MemberCards';
|
||||
|
||||
export default (()=>{
|
||||
return(
|
||||
<div>
|
||||
<div className="MemberBoxThree">
|
||||
<Cards
|
||||
img="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"
|
||||
name="陈教授"
|
||||
time="2020-04-29"
|
||||
focusStatus={true}
|
||||
/>
|
||||
<Cards
|
||||
img="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"
|
||||
name="陈教授"
|
||||
time="2020-04-29"
|
||||
focusStatus={true}
|
||||
/>
|
||||
<Cards
|
||||
img="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"
|
||||
name="陈教授"
|
||||
time="2020-04-29"
|
||||
focusStatus={true}
|
||||
/>
|
||||
<Cards
|
||||
img="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"
|
||||
name="陈教授"
|
||||
time="2020-04-29"
|
||||
focusStatus={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Box=styled.div`{
|
||||
padding:0px 38px;
|
||||
}`
|
||||
const Div = styled.div`{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
margin-left:10px;
|
||||
padding:25px 0px;
|
||||
border-bottom:1px solid #eee;
|
||||
}`
|
||||
const Imgs = styled.img`{
|
||||
width:30px;
|
||||
height:30px;
|
||||
margin-right:12px;
|
||||
border-radius:50%;
|
||||
}`
|
||||
|
||||
export default (()=>{
|
||||
return(
|
||||
<Box>
|
||||
<Div>
|
||||
<Imgs src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"/>
|
||||
<Link to={""}>ajdfwkerijwirjklsf</Link>
|
||||
</Div>
|
||||
<Div>
|
||||
<Imgs src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"/>
|
||||
<Link to={""}>ajdfwkerijwirjklsf</Link>
|
||||
</Div>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React , {useState} from 'react';
|
||||
import { Button } from 'antd';
|
||||
import styled from 'styled-components';
|
||||
import { Box , Short , Long , Gap , WhiteBack , AlignCenterBetween } from '../Component/layout';
|
||||
import Tabs from '../Component/Tabs';
|
||||
|
||||
import Memberlist from './GroupDetailMember';
|
||||
import Grouplist from './GroupDetailProject';
|
||||
|
||||
const Leave = styled.a`{
|
||||
display:block;
|
||||
border-radius:5px;
|
||||
border:1px solid rgba(40,189,108,1);
|
||||
color:rgba(40,189,108,1);
|
||||
padding:0px 14px;
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
}`
|
||||
export default ((props)=>{
|
||||
const [ nav , setNav ] = useState('0');
|
||||
|
||||
return(
|
||||
<Box className="GroupSubLevel">
|
||||
<Short className="g-sub-left">
|
||||
<AlignCenterBetween>
|
||||
<span className="color-grey-3">Owndsknamename</span>
|
||||
<Leave>离开团队</Leave>
|
||||
</AlignCenterBetween>
|
||||
<div className="g-desc">该团队暂无描述</div>
|
||||
<div className="g-tip">
|
||||
<p>管理员团队对 <span>所有仓库</span> 具有操作权限，且对组织具有 <span>管理员权限</span>。 </p>
|
||||
<p>此外，该团队拥有了 <span>创建仓库</span> 的权限：成员可以在组织中创建新的仓库。 </p>
|
||||
<Button type="primary">团队设置</Button>
|
||||
</div>
|
||||
</Short>
|
||||
<Long>
|
||||
<Gap>
|
||||
<WhiteBack>
|
||||
<Tabs nav={['团队成员','团队项目']} index={nav} onChange={setNav}>
|
||||
{
|
||||
nav === "0" ?
|
||||
<Memberlist />:<Grouplist />
|
||||
}
|
||||
</Tabs>
|
||||
</WhiteBack>
|
||||
</Gap>
|
||||
</Long>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Route, Switch } from "react-router-dom";
|
||||
import Loadable from "react-loadable";
|
||||
import Loading from "../../Loading";
|
||||
|
||||
import { SnackbarHOC } from "educoder";
|
||||
import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
|
||||
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
|
||||
|
||||
import Loadable from "react-loadable";
|
||||
import Loading from "../../Loading";
|
||||
|
||||
import '../css/index.css';
|
||||
|
||||
|
|
@ -15,17 +15,39 @@ const New = Loadable({
|
|||
loader: () => import("./New"),
|
||||
loading: Loading,
|
||||
});
|
||||
const DetailIndex = Loadable({
|
||||
loader: () => import("./Detail"),
|
||||
loading: Loading,
|
||||
});
|
||||
const SubDetail = Loadable({
|
||||
loader: () => import("./SubDetail"),
|
||||
loading: Loading,
|
||||
});
|
||||
export default CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(
|
||||
((props)=>{
|
||||
return (
|
||||
<div className="newMain">
|
||||
<Switch {...props}>
|
||||
<Route
|
||||
path="/organize/:organizeId/member"
|
||||
render={(props) => {
|
||||
return <SubDetail {...props} />
|
||||
}}
|
||||
></Route>
|
||||
<Route
|
||||
path="/organize/new"
|
||||
render={(props) => {
|
||||
return <New {...props} />;
|
||||
return <New {...props} />
|
||||
}}
|
||||
></Route>
|
||||
<Route
|
||||
path="/organize/:organizeId"
|
||||
render={(props) => {
|
||||
return <DetailIndex {...props} />
|
||||
}}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)))
|
||||
|
|
@ -12,13 +12,14 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
.teamBox-form{
|
||||
padding:24px 40px;
|
||||
padding:24px 40px 0px 40px;
|
||||
}
|
||||
.lables{
|
||||
position: relative;
|
||||
color:#333;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.lables.must::before{
|
||||
content: "*";
|
||||
|
|
@ -29,3 +30,246 @@
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
.ant-btn.grey{
|
||||
background: #bbb;
|
||||
color: #fff;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
.teamDetail{
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.list-l{
|
||||
background-color: #fff;
|
||||
max-width: 860px;
|
||||
width: 72%;
|
||||
.head{
|
||||
padding:16px 32px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.addBtn{
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
border:1px solid #5091FF;
|
||||
color: #5091FF;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding:0px 10px;
|
||||
}
|
||||
}
|
||||
.team{
|
||||
padding:0px 32px;
|
||||
.team_project{
|
||||
padding:22px 0px;
|
||||
border-bottom: 1px solid #eee;
|
||||
.t_p_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.name{
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 18px;
|
||||
max-width: 500px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
color: #333;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
&:last-child{
|
||||
border-bottom: none;;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-r{
|
||||
width: 28%;
|
||||
max-width: 340px;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.box{
|
||||
background:rgba(255,255,255,1);
|
||||
border-radius:5px;
|
||||
margin-bottom: 20px;
|
||||
.head{
|
||||
padding:25px 20px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
}
|
||||
.content{
|
||||
padding:13px 0px;
|
||||
.teammembers{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:13px 20px;
|
||||
.m-img{
|
||||
border-radius: 50%;
|
||||
width:45px;
|
||||
height: 45px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
padding:15px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subNavs{
|
||||
display: flex;
|
||||
a{
|
||||
display: block;
|
||||
margin-left: 14px;
|
||||
height: 40px;
|
||||
padding:0px 22px;
|
||||
border-radius: 2px;
|
||||
border:1px solid #eee;
|
||||
background-color: #fafafa;
|
||||
color:#333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
span{
|
||||
display: block;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
lable{
|
||||
display: block;
|
||||
padding:0px 7px;
|
||||
background-color:#eee;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
border-radius: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
&.active{
|
||||
border:1px solid #5091FF;
|
||||
color: #5091FF;
|
||||
lable{
|
||||
background-color: #F1F8FF;
|
||||
color: #5091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 组织团队
|
||||
.groupBox{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
background-color: #fff;
|
||||
padding:30px 35px;
|
||||
margin-bottom: 30px;
|
||||
&>div{
|
||||
border:1px solid #eee;
|
||||
background-color: #fff;
|
||||
width: 48.5%;
|
||||
margin-right: 3%;
|
||||
margin-bottom: 30px;
|
||||
.g-head,.g-foot{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #F1F8FF;
|
||||
padding:10px 10px 10px 25px;
|
||||
align-items: center;
|
||||
}
|
||||
.g-foot{
|
||||
background-color: #fafafa;
|
||||
justify-content: left;
|
||||
}
|
||||
.g-body{
|
||||
padding:15px 25px;
|
||||
}
|
||||
}
|
||||
&>div:nth-child(2n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
// 组织成员-一行四个
|
||||
.memberBox{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
padding:24px 35px;
|
||||
margin-bottom: 30px;
|
||||
min-height: 400px;
|
||||
align-content: flex-start;
|
||||
&>div{
|
||||
width:22.75% ;
|
||||
margin-right: 3%;
|
||||
.m-infos{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
&>div:nth-child(4n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
// 团队成员-一行三个
|
||||
.MemberBoxThree{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
padding:24px 35px;
|
||||
margin-bottom: 30px;
|
||||
min-height: 400px;
|
||||
align-content: flex-start;
|
||||
&>div{
|
||||
width:31% ;
|
||||
margin-right: 3.5%;
|
||||
.m-infos{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
&>div:nth-child(3n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
// 团队详情（成员、项目）
|
||||
.GroupSubLevel{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.g-sub-left{
|
||||
background-color: #fff;
|
||||
.g-desc{
|
||||
padding:18px 20px;
|
||||
color:#333;
|
||||
min-height: 100px;
|
||||
}
|
||||
.g-tip{
|
||||
padding:28px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
&>p{
|
||||
margin-bottom: 10px!important;
|
||||
}
|
||||
&>p>span{
|
||||
color:#333;
|
||||
}
|
||||
&>button{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import Search from '../Component/Search';
|
||||
import Sort from '../Component/Sort';
|
||||
import ListCount from '../Component/ListCount';
|
||||
import Box from './Box';
|
||||
import './Index.scss';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Menu } from 'antd';
|
||||
|
||||
const Span = styled.span`{
|
||||
color:#888;
|
||||
font-size:12px;
|
||||
margin-right:10px;
|
||||
}`
|
||||
const Align = styled.div`{
|
||||
display:flex;
|
||||
aligin:center;
|
||||
}`
|
||||
const ListName = styled.div`{
|
||||
font-size:14px;
|
||||
color:#333;
|
||||
margin-bottom:8px;
|
||||
height:18px;
|
||||
line-height:18px;
|
||||
}`;
|
||||
const ColorListName = styled.div`{
|
||||
color:#5091FF;
|
||||
font-size:14px;
|
||||
margin-bottom:8px;
|
||||
height:18px;
|
||||
line-height:18px;
|
||||
}`
|
||||
const Img = styled.img`{
|
||||
border-radius:50%;
|
||||
width:45px;
|
||||
height:45px;
|
||||
margin-right:12px;
|
||||
}`
|
||||
export default (()=>{
|
||||
function onSearch(value){
|
||||
|
||||
}
|
||||
const menu=(
|
||||
<Menu>
|
||||
<Menu.Item key="updated_on">更新时间排序</Menu.Item>
|
||||
<Menu.Item key="created_on">项目数排序</Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
const menu_new=(
|
||||
<Menu>
|
||||
<Menu.Item key="updated_on">新建托管项目</Menu.Item>
|
||||
<Menu.Item key="created_on">新建镜像项目</Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
const leftList = (
|
||||
<div className="team_project">
|
||||
<p className="t_p_title">
|
||||
<span className="flex1">
|
||||
<span className="name">react项目react项目react项目react项目</span>
|
||||
<i className="iconfont icon-banbenku font-20 color-green" />
|
||||
<i className="iconfont icon-jingxiang font-18 color-green" />
|
||||
<i className="iconfont icon-fork font-18 color-orange" />
|
||||
</span>
|
||||
<ListCount fork={1} parise={0}/>
|
||||
</p>
|
||||
<div className="desc">
|
||||
用于构建用户界面的 JavaScript 库
|
||||
</div>
|
||||
<div className="infos">
|
||||
<span className="font-12 color-grey-8">更新于1天前</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return(
|
||||
<div className="list">
|
||||
<div className="list-l">
|
||||
<div className="head">
|
||||
<div style={{width:"370px"}}>
|
||||
<Search placeholder="输入仓库名称进行搜索" onSearch={onSearch}/>
|
||||
</div>
|
||||
<p>
|
||||
<Sort menu={menu_new}>
|
||||
<a className="addBtn mr30">+ 新建项目</a>
|
||||
</Sort>
|
||||
<Sort menu={menu}>
|
||||
<a className="color-blue">排序<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
|
||||
</Sort>
|
||||
</p>
|
||||
</div>
|
||||
<div className="team">
|
||||
{leftList}
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-r">
|
||||
<Box name="组织成员" count={8}>
|
||||
<div className="teammembers">
|
||||
<Img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1990625098,3468619056&fm=111&gp=0.jpg" alt="" className="m-img"/>
|
||||
<div>
|
||||
<ListName>陈Professer</ListName>
|
||||
<Align><i className="iconfont icon-shijian color-green mr3 font-13"></i><Span>加入时间：2020-04-28</Span></Align>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
<Box
|
||||
name="组织团队"
|
||||
count={3}
|
||||
bottom={<Button type={'primary'} to={``}>新建团队</Button>}
|
||||
>
|
||||
<div className="teammembers">
|
||||
<div>
|
||||
<ColorListName>陈Professer</ColorListName>
|
||||
<Align>
|
||||
<Span>2名成员</Span>
|
||||
<Span>1个仓库</Span>
|
||||
</Align>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -1,13 +1,17 @@
|
|||
import React,{ forwardRef , useCallback } from 'react';
|
||||
import './Index.scss';
|
||||
import { Form , Input , Cascader , Checkbox , Upload } from "antd";
|
||||
import { Form , Input , Cascader , Radio , Checkbox , Upload , Button } from "antd";
|
||||
import { locData } from "../Utils/locData";
|
||||
|
||||
|
||||
export default Form.create()(
|
||||
forwardRef(({form})=>{
|
||||
const { getFieldDecorator, validateFields, setFieldsValue } = form;
|
||||
|
||||
const radioStyle = {
|
||||
display: 'block',
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
}
|
||||
const helper = useCallback(
|
||||
(label, name, rules, widget, isRequired = true) => (
|
||||
<React.Fragment>
|
||||
|
|
@ -52,11 +56,11 @@ export default Form.create()(
|
|||
'可见性',
|
||||
"exposure",
|
||||
[{ required: true, message: "请选择可见性" }],
|
||||
<Checkbox.Group>
|
||||
<Checkbox value="1" key={1}>公开</Checkbox>
|
||||
<Checkbox value="2" key={2}>受限<span className="color-grey-8">（仅对登录用户可见）</span></Checkbox>
|
||||
<Checkbox value="3" key={3}>公开<span className="color-grey-8">（仅对组织成员可见）</span></Checkbox>
|
||||
</Checkbox.Group>
|
||||
<Radio.Group name="exposure">
|
||||
<Radio style={radioStyle} value="1" key={1}>公开</Radio>
|
||||
<Radio style={radioStyle} value="2" key={2}>受限<span className="color-grey-8">（仅对登录用户可见）</span></Radio>
|
||||
<Radio style={radioStyle} value="3" key={3}>公开<span className="color-grey-8">（仅对组织成员可见）</span></Radio>
|
||||
</Radio.Group>
|
||||
)}
|
||||
{helper(
|
||||
'选择头像',
|
||||
|
|
@ -72,6 +76,10 @@ export default Form.create()(
|
|||
)}
|
||||
</Form>
|
||||
</div>
|
||||
<p className="mt20">
|
||||
<Button type="primary" className="mr30">创建组织</Button>
|
||||
<Button className="grey">取消</Button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
import React from 'react';
|
||||
import { Route, Switch , Link } from "react-router-dom";
|
||||
import Loadable from "react-loadable";
|
||||
import Loading from "../../Loading";
|
||||
import './Index.scss';
|
||||
|
||||
import Cards from '../Component/Cards';
|
||||
|
||||
const Group = Loadable({
|
||||
loader: () => import("./TeamGroup"),
|
||||
loading: Loading,
|
||||
});
|
||||
const Member = Loadable({
|
||||
loader: () => import("./TeamMember"),
|
||||
loading: Loading,
|
||||
});
|
||||
const GroupDetails = Loadable({
|
||||
loader: () => import("./GroupDetails"),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
export default ((props)=>{
|
||||
return(
|
||||
<div className="teamDetail">
|
||||
<Cards
|
||||
title="组织名称"
|
||||
rightBtn={
|
||||
<span className="subNavs">
|
||||
<Link to={``} className="active"><span>组织成员</span><lable>13</lable></Link>
|
||||
<Link to={``}><span>组织团队</span><lable>13</lable></Link>
|
||||
</span>
|
||||
}
|
||||
img={`https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4193840146,2109186388&fm=26&gp=0.jpg`}
|
||||
/>
|
||||
<Switch {...props}>
|
||||
<Route
|
||||
path="/organize/:organizeId/member/:memberId"
|
||||
render={(props) => {
|
||||
return <GroupDetails {...props} />
|
||||
}}
|
||||
></Route>
|
||||
<Route
|
||||
path="/organize/:organizeId/member"
|
||||
render={(props) => {
|
||||
return <Member {...props} />
|
||||
}}
|
||||
></Route>
|
||||
<Route
|
||||
path="/organize/:organizeId/group"
|
||||
render={(props) => {
|
||||
return <Group {...props} />
|
||||
}}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react';
|
||||
import { Banner } from '../Component/layout';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const SpanName = styled.span`{
|
||||
font-size:16px;
|
||||
color:#333;
|
||||
}`
|
||||
const SpanFoot = styled.span`{
|
||||
margin-right:5px;
|
||||
color:#333
|
||||
}`
|
||||
const ALink = styled.a`{
|
||||
border:1px solid #F73030;
|
||||
color:#F73030!important;
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
padding:0px 15px;
|
||||
border-radius:5px;
|
||||
}`
|
||||
const ImgContent = styled.img`{
|
||||
height:44px;
|
||||
width:44px;
|
||||
border-radius:50%;
|
||||
margin:5px 20px 5px 0px;
|
||||
}`
|
||||
export default (()=>{
|
||||
return(
|
||||
<div>
|
||||
<Banner>组织团队</Banner>
|
||||
<div className="groupBox">
|
||||
<div>
|
||||
<p className="g-head">
|
||||
<SpanName>oweners</SpanName>
|
||||
<ALink>离开团队</ALink>
|
||||
</p>
|
||||
<div className="g-body">
|
||||
<ImgContent src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"/>
|
||||
<ImgContent src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"/>
|
||||
</div>
|
||||
<p className="g-foot">
|
||||
<SpanFoot>2 名成员</SpanFoot>
|
||||
<SpanFoot>1 个项目</SpanFoot>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import { Banner } from '../Component/layout';
|
||||
import Cards from '../Component/MemberCards';
|
||||
|
||||
export default (()=>{
|
||||
return(
|
||||
<div>
|
||||
<Banner>组织成员</Banner>
|
||||
<div className="memberBox">
|
||||
<Cards
|
||||
img="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"
|
||||
name="陈教授"
|
||||
time="2020-04-29"
|
||||
focusStatus={true}
|
||||
/>
|
||||
<Cards
|
||||
img="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"
|
||||
name="陈教授"
|
||||
time="2020-04-29"
|
||||
focusStatus={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -26,6 +26,9 @@ export default Form.create()(
|
|||
const [attachment, setAttachment] = useState(undefined);
|
||||
const [options , setOptions] = useState(undefined);
|
||||
|
||||
|
||||
const repo_id = projectDetail && projectDetail.repo_id;
|
||||
const { projectsId, versionId } = match.params;
|
||||
useEffect(()=>{
|
||||
getBranchs(projectsId);
|
||||
},[projectsId])
|
||||
|
|
@ -41,9 +44,6 @@ export default Form.create()(
|
|||
line-height: 35px;
|
||||
`;
|
||||
|
||||
const repo_id = projectDetail && projectDetail.repo_id;
|
||||
const { projectsId, versionId } = match.params;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (versionId) {
|
||||
|
|
|
|||
|
|
@ -1338,15 +1338,6 @@ samp {
|
|||
padding: 16px 0px;
|
||||
}
|
||||
|
||||
/* FORM START */
|
||||
.ant-form label {
|
||||
/* 为了覆盖antd的样式，这里使用了important，TODO */
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.ant-form label.font-18 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.ant-form label.font-14 {
|
||||
font-size: 14px !important;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { CenterBtnGrp, SaveBtn, CancelBtn } from "../util/GeneralButton";
|
|||
import { useLoaded } from "../util/hooks";
|
||||
import { updateResume } from "../data/updateResume";
|
||||
import { getResume } from "../data/getResume";
|
||||
import Nav from "../util/Nav";
|
||||
|
||||
const Backgroud = styled(FullScreen)`
|
||||
background: rgba(245, 246, 249, 1);
|
||||
|
|
|
|||
Loading…
Reference in New Issue