Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

导航栏设置

This commit is contained in:
caishi 2021-03-19 15:46:37 +08:00
parent a3226dca4e
commit d7f3c766b4
7 changed files with 210 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/forge/Main/Detail.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Spin, Tooltip } from 'antd'; import { Spin, Tooltip } from 'antd';
import { Link, Route, Switch } from 'react-router-dom'; import { Link, Route, Switch } from 'react-router-dom';
import { Content } from '../Component/layout'; import { Content } from '../Component/layout';
import DetailBanner from './sub/DetailBanner';
import '../css/index.scss' import '../css/index.scss'
import './list.css'; import './list.css';
@ -257,6 +258,7 @@ class Detail extends Component {
getDetail = () => { getDetail = () => {
const { projectsId , owner } = this.props.match.params; const { projectsId , owner } = this.props.match.params;
this.getBanner();
const url = `/${owner}/${projectsId}/detail.json`; const url = `/${owner}/${projectsId}/detail.json`;
axios.get(url).then((result) => { axios.get(url).then((result) => {
if (result && result.data) { if (result && result.data) {
@ -278,6 +280,19 @@ class Detail extends Component {
}).catch((error) => { }) }).catch((error) => { })
} }
// 获取动态导航栏菜单
getBanner(){
const { projectsId , owner } = this.props.match.params;
const url = `/${owner}/${projectsId}/menu_list.json`;
axios.get(url).then(result=>{
if(result){
this.setState({
bannerList:result.data
})
}
}).catch(error=>{})
}
// 关注和取消关注 // 关注和取消关注
focusFunc = (flag) => { focusFunc = (flag) => {
const { platform } = this.state; const { platform } = this.state;
@ -374,7 +389,7 @@ class Detail extends Component {
const { projectDetail, watchers_count, praises_count, const { projectDetail, watchers_count, praises_count,
forked_count, firstSync , secondSync , forked_count, firstSync , secondSync ,
isManager, watched, praised, isManager, watched, praised,
project , open_devops , platform , defaultBranch } = this.state; project , open_devops , platform , defaultBranch , bannerList } = this.state;
const url = this.props.history.location.pathname; const url = this.props.history.location.pathname;
const urlArr = url.split("/"); const urlArr = url.split("/");
const urlFlag = (urlArr.length === 3); const urlFlag = (urlArr.length === 3);
@ -494,79 +509,25 @@ class Detail extends Component {
</div> </div>
{ {
firstSync ? "" : firstSync ? "" :
<div className="f-wrap-between mt15"> <DetailBanner
<ul className="headerMenu-wrapper"> list={bannerList}
<li className={pathname==="about" ? "active" : ""}> owner={owner}
<Link to={{ pathname: `/projects/${owner}/${projectsId}/about`, state }}> projectsId={projectsId}
<i className={(pathname==="" || urlFlag) ? "iconfont icon-zhuye1 color-grey-3 mr5 font-14":"iconfont icon-zhuye1 color-grey-6 font-14 mr5"}></i> pathname={pathname}
<span>主页</span> state={state}
</Link> projectDetail={projectDetail}
</li> open_devops={open_devops}
<li className={(pathname==="" || urlFlag) ? "active" : ""}> platform={platform}
<Link to={{ pathname: `/projects/${owner}/${projectsId}`, state }}> urlFlag={urlFlag}
<i className={(pathname==="" || urlFlag) ? "iconfont icon-daimaku color-grey-3 mr5 font-14":"iconfont icon-daimaku color-grey-6 font-14 mr5"}></i> isManager={isManager}
<span>代码库</span> />
</Link>
</li>
<li className={pathname==="issues" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/issues`, state }}>
<i className={pathname==="issues" ? "iconfont icon-renwu color-grey-3 mr5 font-14":"iconfont icon-renwu color-grey-6 font-14 mr5"}></i>
<span>易修 (Issue)</span>
{projectDetail && projectDetail.issues_count ? <span className="num">{projectDetail.issues_count}</span> : ""}
</Link>
</li>
{
projectDetail && parseInt(projectDetail.type) !== 2 && platform &&
<li className={pathname==="pulls" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}>
<i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i>
<span>合并请求</span>
{projectDetail && projectDetail.pull_requests_count ? <span className="num">{projectDetail.pull_requests_count}</span> : ""}
</Link>
</li>
}
{
platform &&
<li className={pathname==="devops" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}>
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流(beta版)
{projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""}
</Link>
</li>
}
<li className={pathname==="milestones" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
<i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i>
<span>里程碑</span>
{projectDetail && projectDetail.versions_count ? <span className="num">{projectDetail.versions_count}</span> :""}
</Link>
</li>
<li className={pathname==="activity" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/activity`, state }}>
<i className={pathname==="activity" ? "iconfont icon-tongzhi color-grey-3 mr5 font-14":"iconfont icon-tongzhi color-grey-6 font-14 mr5"}></i>
<span>动态</span>
</Link>
</li>
{
isManager && platform &&
<li className={url.indexOf("/setting") > 0 ? "active" : ""}>
<Link to={`/projects/${owner}/${projectsId}/setting`}>
<i className={url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i>
<span>仓库设置</span>
</Link>
</li>
}
</ul>
</div>
} }
</div> </div>
</div> </div>
{ {
firstSync ? firstSync ?
<Content className="spincontent"> <Content className="spincontent">
<Spin className="spinstyle" tip={project && `正在从 ${project.mirror_url} 迁移`} size="large"> <Spin className="spinstyle" tip={project && `正在从 ${project.mirror_url} 迁移`} size="large" />
</Spin>
</Content> </Content>
: :
<Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large"> <Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large">

55
src/forge/Main/sub/DetailBanner.jsx
View File

@ -1,22 +1,43 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { Skeleton } from 'antd';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
function DetailBanner({ isManager , url , pathname , owner , projectsId , state , urlFlag , projectDetail , platform ,open_devops }){ function DetailBanner({ list , owner , projectsId , isManager , url , pathname , state , urlFlag , projectDetail , platform ,open_devops }){
const [ menuName , setMenuName ] = useState(undefined);
useEffect(()=>{
if(list){
setMenuName(list);
}
},[list]);
return( return(
<div className="f-wrap-between mt15"> <div className="f-wrap-between mt15">
{
menuName && projectDetail ?
<ul className="headerMenu-wrapper"> <ul className="headerMenu-wrapper">
{
menuName.map((item,key)=>{
return(
<React.Fragment>
{
item.menu_name === "home" &&
<li className={pathname==="about" ? "active" : ""}> <li className={pathname==="about" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/about`, state }}> <Link to={{ pathname: `/projects/${owner}/${projectsId}/about`, state }}>
<i className={(pathname==="" || urlFlag) ? "iconfont icon-zhuye1 color-grey-3 mr5 font-14":"iconfont icon-zhuye1 color-grey-6 font-14 mr5"}></i> <i className={(pathname==="" || urlFlag) ? "iconfont icon-zhuye1 color-grey-3 mr5 font-14":"iconfont icon-zhuye1 color-grey-6 font-14 mr5"}></i>
<span>主页</span> <span>主页</span>
</Link> </Link>
</li> </li>
}
{
item.menu_name === "code" &&
<li className={(pathname==="" || urlFlag) ? "active" : ""}> <li className={(pathname==="" || urlFlag) ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}`, state }}> <Link to={{ pathname: `/projects/${owner}/${projectsId}`, state }}>
<i className={(pathname==="" || urlFlag) ? "iconfont icon-daimaku color-grey-3 mr5 font-14":"iconfont icon-daimaku color-grey-6 font-14 mr5"}></i> <i className={(pathname==="" || urlFlag) ? "iconfont icon-daimaku color-grey-3 mr5 font-14":"iconfont icon-daimaku color-grey-6 font-14 mr5"}></i>
<span>代码库</span> <span>代码库</span>
</Link> </Link>
</li> </li>
}
{
item.menu_name === "issues" &&
<li className={pathname==="issues" ? "active" : ""}> <li className={pathname==="issues" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/issues`, state }}> <Link to={{ pathname: `/projects/${owner}/${projectsId}/issues`, state }}>
<i className={pathname==="issues" ? "iconfont icon-renwu color-grey-3 mr5 font-14":"iconfont icon-renwu color-grey-6 font-14 mr5"}></i> <i className={pathname==="issues" ? "iconfont icon-renwu color-grey-3 mr5 font-14":"iconfont icon-renwu color-grey-6 font-14 mr5"}></i>
@ -24,26 +45,29 @@ function DetailBanner({ isManager , url , pathname , owner , projectsId , state
{projectDetail && projectDetail.issues_count ? <span className="num">{projectDetail.issues_count}</span> : ""} {projectDetail && projectDetail.issues_count ? <span className="num">{projectDetail.issues_count}</span> : ""}
</Link> </Link>
</li> </li>
}
{ {
projectDetail && parseInt(projectDetail.type) !== 2 && platform && item.menu_name === "pulls" && projectDetail && parseInt(projectDetail.type) !== 2 && platform ?
<li className={pathname==="pulls" ? "active" : ""}> <li className={pathname==="pulls" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}> <Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}>
<i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i> <i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i>
<span>合并请求</span> <span>合并请求</span>
{projectDetail && projectDetail.pull_requests_count ? <span className="num">{projectDetail.pull_requests_count}</span> : ""} {projectDetail && projectDetail.pull_requests_count ? <span className="num">{projectDetail.pull_requests_count}</span> : ""}
</Link> </Link>
</li> </li>:""
} }
{ {
platform && item.menu_name === "devops" && platform ?
<li className={pathname==="devops" ? "active" : ""}> <li className={pathname==="devops" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}> <Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}>
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流(beta版) <i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流(beta版)
{projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""} {projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""}
</Link> </Link>
</li> </li>
:""
} }
{
item.menu_name === "versions" &&
<li className={pathname==="milestones" ? "active" : ""}> <li className={pathname==="milestones" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}> <Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
<i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i> <i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i>
@ -51,22 +75,33 @@ function DetailBanner({ isManager , url , pathname , owner , projectsId , state
{projectDetail && projectDetail.versions_count ? <span className="num">{projectDetail.versions_count}</span> :""} {projectDetail && projectDetail.versions_count ? <span className="num">{projectDetail.versions_count}</span> :""}
</Link> </Link>
</li> </li>
}
{
item.menu_name === "activity" &&
<li className={pathname==="activity" ? "active" : ""}> <li className={pathname==="activity" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/activity`, state }}> <Link to={{ pathname: `/projects/${owner}/${projectsId}/activity`, state }}>
<i className={pathname==="activity" ? "iconfont icon-tongzhi color-grey-3 mr5 font-14":"iconfont icon-tongzhi color-grey-6 font-14 mr5"}></i> <i className={pathname==="activity" ? "iconfont icon-tongzhi color-grey-3 mr5 font-14":"iconfont icon-tongzhi color-grey-6 font-14 mr5"}></i>
<span>动态</span> <span>动态</span>
</Link> </Link>
</li> </li>
}
</React.Fragment>
)
})
}
{ {
isManager && platform && isManager && platform ?
<li className={url.indexOf("/setting") > 0 ? "active" : ""}> <li className={pathname === "setting" ? "active" : ""}>
<Link to={`/projects/${owner}/${projectsId}/setting`}> <Link to={`/projects/${owner}/${projectsId}/setting`}>
<i className={url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i> <i className={url && url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i>
<span>仓库设置</span> <span>仓库设置</span>
</Link> </Link>
</li> </li>:""
} }
</ul> </ul>
:
<Skeleton paragraph={false} active={true}/>
}
</div> </div>
) )
} }

4
src/forge/Merge/merge.js
View File

@ -272,8 +272,8 @@ class merge extends Component {
</React.Fragment> </React.Fragment>
); );
return ( return (
<div className="main"> <div className="main" style={{padding:"0px"}}>
<div className="topWrapper" style={{borderBottom:"none"}}> <div className="topWrapper" style={{borderBottom:"none",padding:"20px"}}>
<div className="target-detail-search"> <div className="target-detail-search">
<Search <Search
placeholder="输入关键字搜索合并请求" placeholder="输入关键字搜索合并请求"

3
src/forge/Order/index.scss
View File

@ -1,6 +1,7 @@
.screenWrap{ .screenWrap{
background:rgba(250,250,250,1); background:rgba(250,250,250,1);
border:1px solid rgba(221,221,221,1); border-top:1px solid rgba(221,221,221,1);
border-bottom:1px solid rgba(221,221,221,1);
padding-left: 20px; padding-left: 20px;
box-sizing: border-box; box-sizing: border-box;
} }

4
src/forge/Order/order.js
View File

@ -524,7 +524,8 @@ class order extends Component {
} = this.state; } = this.state;
return ( return (
<div className="main"> <div className="main" style={{padding:"0px"}}>
<div style={{padding:"10px 20px 0px 20px"}}>
<div className="topWrapper" style={{ paddingTop: "10px" }}> <div className="topWrapper" style={{ paddingTop: "10px" }}>
<ul className="topWrapper_type"> <ul className="topWrapper_type">
<li> <li>
@ -568,6 +569,7 @@ class order extends Component {
<DatePicker value={end ? moment(end, 'YYYY-MM-DD') : ""} placeholder="请选择结束时间" onChange={this.changeEndTime} /> <DatePicker value={end ? moment(end, 'YYYY-MM-DD') : ""} placeholder="请选择结束时间" onChange={this.changeEndTime} />
</div> </div>
</div> </div>
</div>
<Spin spinning={isSpin}> <Spin spinning={isSpin}>
<div className="f-wrap-between screenWrap"> <div className="f-wrap-between screenWrap">
<div className="df"> <div className="df">

2
src/forge/Settings/Index.js
View File

@ -82,7 +82,7 @@ class Index extends Component {
> >
<p> <p>
<Link to={`/projects/${owner}/${projectsId}/setting/tags`} className="w-100"> <Link to={`/projects/${owner}/${projectsId}/setting/tags`} className="w-100">
<i className="iconfont icon-biaoqian3 font-18 mr10"></i> <i className="iconfont icon-biaoqian3 font-18 mr10 color-grey-6"></i>
项目标签 项目标签
</Link> </Link>
</p> </p>

67
src/forge/Settings/Setting.js
View File

@ -2,11 +2,20 @@ import React, { Component } from "react";
import { Form, Input, Checkbox, Select , Spin } from "antd"; import { Form, Input, Checkbox, Select , Spin } from "antd";
import Title from '../Component/Title'; import Title from '../Component/Title';
import {WhiteBack} from '../Component/layout'; import {WhiteBack} from '../Component/layout';
import axios from "axios"; import axios from "axios";
import "./setting.scss"; import "./setting.scss";
const { TextArea } = Input; const { TextArea } = Input;
const { Option } = Select; const { Option } = Select;
const menu = [
{name:"主页",index:"home"},
{name:"代码库",index:"code"},
{name:"易修 (Issue)",index:"issues"},
{name:"合并请求",index:"pulls"},
{name:"工作流(beta版)",index:"devops"},
{name:"里程碑",index:"versions"},
{name:"动态",index:"activity"},
]
class Setting extends Component { class Setting extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -14,7 +23,8 @@ class Setting extends Component {
CategoryList: undefined, CategoryList: undefined,
LanguageList: undefined, LanguageList: undefined,
private_check: undefined, private_check: undefined,
loading:true loading:true,
project_units:['home',"activity"]
}; };
} }
@ -51,12 +61,18 @@ class Setting extends Component {
.get(url) .get(url)
.then((result) => { .then((result) => {
if (result) { if (result) {
const { project_units } = this.state;
let units = result.data.project_units;
units.push(...project_units);
this.props.form.setFieldsValue({ this.props.form.setFieldsValue({
...result.data, ...result.data,
project_units:units
}); });
this.setState({ this.setState({
private_check: result.data.private, private_check: result.data.private,
loading:false loading:false,
project_units:units
}); });
} }
}) })
@ -104,17 +120,30 @@ class Setting extends Component {
loading:true loading:true
}) })
const { projectsId , owner } = this.props.match.params; const { projectsId , owner } = this.props.match.params;
const navUrl = `/${owner}/${projectsId}/project_units.json`;
let unit = values.project_units.filter(item => (item !== "home" && item!== "activity"));
axios.post(navUrl, {
unit_types:unit
}).then((result) => {
if (result) {
this.update(values);
}
}).catch(error=>{})
}
});
};
update=(values)=>{
const { projectsId , owner } = this.props.match.params;
const { private_check } = this.state; const { private_check } = this.state;
const url = `/${owner}/${projectsId}.json`; const url = `/${owner}/${projectsId}.json`;
axios axios.put(url, {
.put(url, {
name: values.project_name, name: values.project_name,
description: values.project_description, description: values.project_description,
private: private_check, private: private_check,
...values, ...values,
}) }).then((result) => {
.then((result) => {
if (result) { if (result) {
this.props.showNotification(`仓库信息修改成功！`); this.props.showNotification(`仓库信息修改成功！`);
const { getDetail } = this.props; const { getDetail } = this.props;
@ -123,16 +152,13 @@ class Setting extends Component {
loading:false loading:false
}) })
} }
}) }).catch((error) => {
.catch((error) => {
console.log(error); console.log(error);
this.setState({ this.setState({
loading:false loading:false
}) })
}); });
} }
});
};
// 删除本仓库 // 删除本仓库
deleteProject = () => { deleteProject = () => {
@ -224,6 +250,25 @@ class Setting extends Component {
], ],
})(<Select>{LanguageList}</Select>)} })(<Select>{LanguageList}</Select>)}
</Form.Item> </Form.Item>
<Form.Item label="项目导航">
{getFieldDecorator("project_units", {
rules: [],
})(
<Checkbox.Group>
{
menu.map((item,key)=>{
return(
<Checkbox
key={key}
value={item.index}
disabled={item.index === "home" || item.index === "activity"}
>{item.name}</Checkbox>
)
})
}
</Checkbox.Group>
)}
</Form.Item>
<p className="clearfix"> <p className="clearfix">
<a className="submitBtn" onClick={this.resetSetting}> <a className="submitBtn" onClick={this.resetSetting}>
更新仓库设置 更新仓库设置