diff --git a/src/forge/Component/Component.scss b/src/forge/Component/Component.scss index d27d4aae..226e9fe6 100644 --- a/src/forge/Component/Component.scss +++ b/src/forge/Component/Component.scss @@ -151,4 +151,42 @@ li.ant-menu-item{ .ant-tree{ margin:0px 20px!important; } +} + +.menuPanels{ + width: 240px; + height: 180px; + .ant-popover-content,.ant-popover-inner{ + height: 100%; + width: 100%; + } +} +.halfs{ + margin-top: 24px; + padding:24px 0px 0px 0px; + border-top: 1px solid #e8e8e8; + .attrPerson{ + padding-bottom: 24px; + } +} +.menuinfos{ + padding:15px 0px; + li{ + display: flex; + flex-direction: column; + align-items: center; + border-right: 1px solid #eee; + flex: 1; + & >span:first-child{ + font-size: 18px; + font-weight: 400; + color: #333; + } + & >span:last-child{ + color: #666; + } + &:last-child{ + border-right: none; + } + } } \ No newline at end of file diff --git a/src/forge/Component/Contributors.jsx b/src/forge/Component/Contributors.jsx index 7215c735..04cd393e 100644 --- a/src/forge/Component/Contributors.jsx +++ b/src/forge/Component/Contributors.jsx @@ -1,44 +1,155 @@ import React, { useEffect, useState } from 'react'; import { AlignCenter , FlexAJ } from '../Component/layout'; import { Link } from 'react-router-dom'; -import { Dropdown , Spin } from 'antd'; +import { Popover , Spin } from 'antd'; import { getImageUrl } from 'educoder'; -import Axios from 'axios'; +import './Component.scss'; +import { getUser } from '../GetData/getData'; +import axios from 'axios'; -function Contributors({contributors,owner,projectsId}){ - - // function menuFunc(login){ - // let data = undefined; - // const url = `/users/${login}.json`; - // Axios.get(url).then(result=>{ - // if(result && result.data){ - // data = result.data; - // } - // }).catch(error=>{}) - - // if(data){ - // return( - //
111
- // ) - // }else{ - // return - // } - // } +function Contributors({contributors,owner,projectsId,id,showNotification}){ + const [ menuList ,setMenuList ]= useState([]); + const [ list , setList ]= useState(undefined); + const [ total , setTotal ]= useState(0); + const [ menu , setMenu ] = useState(""); + const [ login , setLogin ] = useState(undefined); + const [ isSpin , setIsSpin ] = useState(false); + + useEffect(()=>{ + if(contributors && contributors.total_count>0){ + setTotal(contributors.total_count); + setList(contributors.list); + } + },[contributors]) + + useEffect(()=>{ + if(login){ + getUsers(login); + }else{ + setMenu(undefined); + } + },[login]) + + async function getUsers(login){ + setIsSpin(true); + let a = menuList && menuList.filter(i=>i.login === login); + if(a.length === 0){ + let result = await getUser(login); + let arr = menuList; + arr.push({...result}); + setMenuList(arr); + setMenusFunc(result); + setIsSpin(false); + }else{ + setMenusFunc(a[0]); + setIsSpin(false); + } + } + + function setMenusFunc(data){ + if(data){ + let ele = ( + + + + + {data.name} + + { + data.is_watch ? FocusFunc(false,data.login)}>取消关注:FocusFunc(true,data.login)}>关注 + } + + +
  • + {data.projects_count} + 项目数 +
    • +
  • + {data.followers_count} + 粉丝数 +
    • +
  • + {data.following_count} + 关注数 +
    • +     + { + data.organizations && data.organizations.length > 0 ? + + 所属组织： +
    + {renderArray(data.organizations)} +
    +     + :"" + } + { + data.location && 所在地址:{data.location} + } +     + ) + setMenu(ele); + } + } + + function FocusFunc(flag,login){ + axios({ + method: flag ? 'post' : 'delete', + url: `/watchers/${flag ? 'follow' : 'unfollow'}.json`, + params: {target_type: "project",id} + }).then(result => { + if (result && (result.data.status === 0 || result.data.status === 2)) { + let a = menuList && menuList.filter(i=>i.login === login); + if(a){ + a[0].is_watch = flag; + } + setMenusFunc(a[0]); + showNotification(result.data.message); + } + }) + .catch(error => { + console.log(error); + }); + } + + function renderArray(array){ + let str = ""; + for(var i = 0;i{substr}) + } + + function setVisibleFunc(flag,l,index){ + if(l !== login){ + setLogin(l); + } + var lx = list.concat(); + lx.map(i=>i.visible =false); + if(flag){ + lx[index].visible = flag; + } + lx.splice(); + setList(lx); + } return( -
    +
    贡献者{ contributors && contributors.total_count > 0 && {contributors.total_count}} 全部 -
    +
    setVisibleFunc(false)}> { - contributors && contributors.total_count > 0 ? - contributors.list.map((item,key)=>{ + total > 0 ? + list.map((item,key)=>{ return( - // menuFunc(item.login)}> - - // + + + setVisibleFunc(true,item.login,key)}/> + + ) }) :"" diff --git a/src/forge/GetData/getData.jsx b/src/forge/GetData/getData.jsx index 115a15a1..2ecc3111 100644 --- a/src/forge/GetData/getData.jsx +++ b/src/forge/GetData/getData.jsx @@ -14,4 +14,8 @@ export const getHooks = async (id,params)=>{ // 获取子目录列表 export const getSubEntries = async (owner,projectsId,params)=>{ return (await axios.get(`/${owner}/${projectsId}/sub_entries.json`,{params})).data; +} +// 获取用户信息 +export const getUser = async (login)=>{ + return (await axios.get(`/users/${login}/hovercard.json`)).data; } \ No newline at end of file diff --git a/src/forge/Main/CoderDepot.jsx b/src/forge/Main/CoderDepot.jsx index a33e0216..8db2b294 100644 --- a/src/forge/Main/CoderDepot.jsx +++ b/src/forge/Main/CoderDepot.jsx @@ -398,10 +398,7 @@ function CoderDepot(props){ {/* 贡献者 */} { projectDetail && projectDetail.contributors && - - - - + } {/* 语言 */} { projectDetail && projectDetail.languages &&