update

src/forge/Main/CoderDepot.jsx

@@ -23,6 +23,7 @@ import Nodata from '../Nodata';
 import Invite from './sub/Invite';
 import CheckProfile from '../Component/ProfileModal/Profile';
 import RenderHtml from '../../components/render-html';
+import Badge from "./sub/Badge";
 /**
  * projectDetail.type:0是托管项目，1是镜像项目，2是同步镜像项目(为2时不支持在线创建、在线上传、在线修改、在线删除、创建合并请求等功能)
  */
@@ -80,6 +81,24 @@ function CoderDepot(props){
   const distribution = details && details.type != 2 && (details.permission === "Admin" || details.permission === "Owner" || details.permission === "Manager");
   const { bannerList } = props;
 
+
+
+  // const [ badges , setBadges] = useState(undefined);
+  // //按照后端返回的数据格式创建的临时数据   后续改为axios
+  // function getBadgeData() {
+  //   axios.get(`/${owner}/${projectsId}/badge.json`)
+  //       .then(result => {
+  //         if(result) {
+  //           setBadges(result)
+  //         }
+  //       })
+  // }
+  // test data
+  const badges = {badge:[{ "login": "many_stars", "image_url": "https://www.gitlink.org.cn/system/lets/letter_avatars/2/J/236_194_58/120.png", "description": "test description1"}, {"login": "many_stars", "image_url": "https://www.gitlink.org.cn/system/lets/letter_avatars/2/X/181_166_38/120.png", "description": "test description2"}], total_count: 3}
+  console.log(badges.badge)
+  console.log(badges.total_count)
+
+
   useEffect(()=>{
     if(bannerList && bannerList.length>0){
       let a = bannerList.filter(i=>i.menu_name === "pulls");
@@ -550,6 +569,11 @@ function CoderDepot(props){
                         <Invite code={inviteCode}/>
                       </div>
                     }
+
+                    {
+                        badges && badges.total_count >0 &&
+                        <Badge badges={badges} owner={owner} />
+                    }
                     {
                       lesson_url &&
                       <div>

src/forge/Main/Index.scss

@@ -509,3 +509,21 @@
     }
   }
 }
+
+.attrBadge{
+  padding-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 2px;
+  a{
+    margin: 0px 17px 10px 0px;
+    img{
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+    }
+    &:nth-child(5n){
+      margin-right: 0px;
+    }
+  }
+}

src/forge/Main/sub/Badge.jsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { AlignCenter , FlexAJ  } from '/home/gitlink/forgeplus/public/react/forgeplus-react/src/forge/Component/layout';
+import { Link } from 'react-router-dom';
+import { Popover , Spin , Button } from 'antd';
+import { getImageUrl } from 'educoder';
+import '../../Component/Component.scss';
+
+
+
+
+// projectDetail && projectDetail.contributors && projectDetail.contributors.total_count >0 &&
+// <Badge contributors={projectDetail.contributors} owner={owner} projectsId={projectsId} />?
+
+function Badge({badges,owner}){
+    const [ list , setList ]= useState(undefined);
+    const [ total , setTotal ]= useState(0);
+    const [ menu , setMenu ] = useState("");
+    const [ login , setLogin ] = useState(undefined);
+    const [ badge , setBadge ] = useState(undefined);
+
+    useEffect(()=>{
+        if(badges && badges.total_count>0){
+            setTotal(badges.total_count);
+            setList(badges.badge);
+        }
+    },[badges])
+
+    useEffect(()=>{
+        setMenusFunc(badge);
+    },[badge])
+
+
+    function setMenusFunc(data){
+        if(data){
+            let ele = (
+                <AlignCenter>
+                    <Link to={`/${data.login}`}><img src={data.image_url} alt="" className="radius" width="38px" height="38px"/></Link>
+                    <div className="ml10">
+                        <Link to={`/${data.login}`}>{data.name}</Link>
+                        { data.description && <span className="leftline">{data.description}</span> }
+                    </div>
+                </AlignCenter>
+            )
+            setMenu(ele);
+        }
+    }
+
+
+    function setVisibleFunc(flag,l,index){
+        if(l !== badge){
+            setBadge(l);
+        }
+        var lx = list.concat();
+        lx.map(i=>i.visible =false);
+        if(flag){
+            lx[index].visible = flag;
+        }
+        lx.splice();
+        setList(lx);
+    }
+
+    // {
+    //     "list": [
+    //     {
+    //         "login": "many_stars",
+    //         "image_url": "User",
+    //         "description": "test description"
+    //     },
+    //     {
+    //         "login": "many_stars",
+    //         "image_url": "User",
+    //         "description": "test description"
+    //     }
+    // ],
+    //     "total_count": 2
+    // }
+    return(
+        <div className="halfs">
+            <Link to={`/${owner}/badge`} className="font-16 color-ooo hoverA">
+                <span>徽章</span>
+                { badges && badges.total_count > 0 && <span className="infoCount">{badges.total_count}</span>}
+            </Link>
+
+            <div className="attrBadge" onMouseLeave={()=>setVisibleFunc(false)}>
+                {
+                    total > 0 ?
+                        list.map((item,key)=>{
+                            return(
+                                <Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="top">
+                                    <Link key={key} to={`/${item.login}`}>
+                                        <img src={item.image_url} alt="" onMouseOver={()=>setVisibleFunc(true,item,key)}/>
+                                    </Link>
+                                </Popover>
+                            )
+                        })
+                        :""
+                }
+            </div>
+        </div>
+    )
+}
+//{getImageUrl(`/${item.image_url}`)}
+export default Badge;

src/forge/users/Index.scss

@@ -240,3 +240,35 @@ ul.ant-menu.menuStyle{
     }
   }
 }
+
+.attrBadge{
+  padding-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 2px;
+  a{
+    margin: 0px 17px 10px 0px;
+    img{
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+    }
+    &:nth-child(5n){
+      margin-right: 0px;
+    }
+  }
+}
+
+
+.infoCount{
+  display: inline-block;
+  width: 24px;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
+  background-color:rgba(153, 153, 153, 0.13);;
+  color:#666;
+  border-radius: 12px;
+  margin-left: 6px;
+  font-size: 12px;
+}

src/forge/users/Infos.js

@@ -13,6 +13,21 @@ import './Index.scss';
 
 import Loadable from "react-loadable";
 import Loading from "../../Loading";
+import Badge from "../Main/sub/Badge";
+
+
+//const [ badges , setBadges] = useState(undefined);
+// 按照后端返回的数据格式创建的临时数据   后续改为axios
+// function getBadgeData() {
+//   axios.get(`/${username}/statistics/badge.json`)
+//       .then(result => {
+//         if(result) {
+//           setBadges(result)
+//         }
+//       })
+// }
+//test data
+const badges = {badge:[{ "login": "many_stars", "image_url": "https://testforgeplus.trustie.net//system/lets/letter_avatars/2/G/178_217_57/120.png", "description": "test description1"}, {"login": "many_stars", "image_url": "https://testforgeplus.trustie.net//images/avatars/User/36480?t=1686645429", "description": "test description2"}], total_count: 3}
 
 const UpdateInfo = Loadable({
   loader: () => import("./Material/Index"),
@@ -276,6 +291,12 @@ class Infos extends Component {
                     :""
                   }
                 </div>
+                {/* 徽章 */}
+                {
+                    badges && badges.total_count >0 &&
+                    <Badge badges={badges} />
+                }
+
               </div>
             </div>
             <div className="list-right">