贡献者-悬浮卡片-测试版1

src/forge/Component/Component.scss

@@ -152,3 +152,41 @@ li.ant-menu-item{
     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;
+    }
+  }
+}

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 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);
 
-  // function menuFunc(login){
+  useEffect(()=>{
-  //   let data = undefined;
+    if(contributors && contributors.total_count>0){
-  //   const url = `/users/${login}.json`;
+      setTotal(contributors.total_count);
-  //   Axios.get(url).then(result=>{
+      setList(contributors.list);
-  //     if(result && result.data){
+    }
-  //       data = result.data;
+  },[contributors])
-  //     }
-  //   }).catch(error=>{})
 
-  //   if(data){
+  useEffect(()=>{
-  //     return(
+    if(login){
-  //       <div>111</div>
+      getUsers(login);
-  //     )
+    }else{
-  //   }else{
+      setMenu(undefined);
-  //     return <Spin />
+    }
-  //   }
+  },[login])
-  // }
+
+  async function getUsers(login){
+    setIsSpin(true);
+    let a = menuList && menuList.filter(i=>i.login === login);
+    if(a.length === 0){
+      let result = await getUser(login);
+      let arr = menuList;
+      arr.push({...result});
+      setMenuList(arr);
+      setMenusFunc(result);
+      setIsSpin(false);
+    }else{
+      setMenusFunc(a[0]);
+      setIsSpin(false);
+    }
+  }
+
+  function setMenusFunc(data){
+    if(data){
+      let ele = (
+        <Spin spinning={isSpin}>
+          <FlexAJ>
+            <AlignCenter>
+              <Link to={`/users/${data.login}`}><img src={getImageUrl(data.image_url)} alt="" className="radius" width="38px" height="38px"/></Link>
+              <Link to={`/users/${data.login}`} className="ml10">{data.name}</Link>
+            </AlignCenter>
+            {
+              data.is_watch ? <a className="color-grey-9" onClick={()=>FocusFunc(false,data.login)}>取消关注</a>:<a className="color-blue" onClick={()=>FocusFunc(true,data.login)}>关注</a>
+            }
+          </FlexAJ>
+          <AlignCenter className="menuinfos">
+            <li>
+              <span>{data.projects_count}</span>
+              <span>项目数</span>
+            </li>
+            <li>
+              <span>{data.followers_count}</span>
+              <span>粉丝数</span>
+            </li>
+            <li>
+              <span>{data.following_count}</span>
+              <span>关注数</span>
+            </li>
+          </AlignCenter>
+          {
+            data.organizations && data.organizations.length > 0 ?
+            <AlignCenter className="font-12 pt4 pb4">
+              <span>所属组织：</span>
+              <div className="task-hide flex1">
+                {renderArray(data.organizations)}
+              </div>
+            </AlignCenter>
+            :""
+          }
+          {
+            data.location && <AlignCenter className="font-12 pt4 pb4"><span>所在地址:</span><span className="ml5">{data.location}</span></AlignCenter>
+          }
+        </Spin>
+      )
+      setMenu(ele);
+    }
+  }
+
+  function FocusFunc(flag,login){
+    axios({
+      method: flag ? 'post' : 'delete',
+      url: `/watchers/${flag ? 'follow' : 'unfollow'}.json`,
+      params: {target_type: "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<array.length;i++){
+      str += array[i].name +"、";
+    }
+    let substr = str.substr(0,str.length-1);
+    return (<span title={substr}>{substr}</span>)
+  }
+
+  function setVisibleFunc(flag,l,index){
+    if(l !== login){
+      setLogin(l);
+    }
+    var lx = list.concat();
+    lx.map(i=>i.visible =false);
+    if(flag){
+      lx[index].visible = flag;
+    }
+    lx.splice();
+    setList(lx);
+  }
 
   return(
-    <div>
+    <div className="halfs">
       <FlexAJ>
         <AlignCenter><span className="font-16 color-grey-6">贡献者</span>{ contributors && contributors.total_count > 0 && <span className="infoCount">{contributors.total_count}</span>}</AlignCenter>
         <Link className="font-12 color-grey-9" to={`/projects/${owner}/${projectsId}/contribute`}>全部</Link>
       </FlexAJ>
-      <div className="attrPerson">
+      <div className="attrPerson" onMouseLeave={()=>setVisibleFunc(false)}>
         {
-          contributors && contributors.total_count > 0 ?
+          total > 0 ?
-          contributors.list.map((item,key)=>{
+          list.map((item,key)=>{
             return(
-              // <Dropdown overlay={()=>menuFunc(item.login)}>
+              <Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="bottom">
-                <Link key={key} to={`/users/${item.login}`}><img src={getImageUrl(`/${item.image_url}`)} alt=""/></Link>
+                <Link key={key} to={`/users/${item.login}`}>
-              // </Dropdown>
+                  <img src={getImageUrl(`/${item.image_url}`)} alt="" onMouseOver={()=>setVisibleFunc(true,item.login,key)}/>
+                </Link>
+              </Popover>
             )
           })
           :""

src/forge/GetData/getData.jsx

@@ -15,3 +15,7 @@ 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;
+}

src/forge/Main/CoderDepot.jsx

@@ -398,10 +398,7 @@ function CoderDepot(props){
                     {/* 贡献者 */}
                     {
                       projectDetail && projectDetail.contributors &&
-                      <React.Fragment>
+                      <Contributors contributors={projectDetail && projectDetail.contributors} owner={owner} projectsId={projectsId} id={projectDetail && projectDetail.project_id} showNotification={props.showNotification}/>
-                        <Divider />
-                        <Contributors contributors={projectDetail && projectDetail.contributors} owner={owner} projectsId={projectsId}/>
-                      </React.Fragment>
                     }
                     {/* 语言 */}
                     { projectDetail && projectDetail.languages &&