first

package.json

@@ -187,7 +187,7 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "proxy": "http://localhost:3000",
+  "proxy": "http://localhost:3001",
   "port": "3007",
   "devDependencies": {
     "@babel/runtime": "7.0.0-beta.51",

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,12 @@ function CoderDepot(props){
   const distribution = details && details.type != 2 && (details.permission === "Admin" || details.permission === "Owner" || details.permission === "Manager");
   const { bannerList } = props;
 
+
+  // 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");
@@ -346,6 +353,7 @@ function CoderDepot(props){
   const fileOperate = type === "dir" && projectDetail && projectDetail.type !== 2 && ((projectDetail.permission && projectDetail.permission !=="Reporter") || (current_user && current_user.admin));
 
   return(
+
     <WhiteBack>
       <UpdateDescModal desc={desc} website={website} lesson_url={lesson_url} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/>
       <Spin spinning={isSpin}>
@@ -369,7 +377,8 @@ function CoderDepot(props){
           </React.Fragment>
         }
         <div style={{minHeight:"500px"}}>
-          { 
+          {
+
             projectDetail &&
             <Box className="Panels">
               <LongWidth>
@@ -550,6 +559,19 @@ function CoderDepot(props){
                         <Invite code={inviteCode}/>
                       </div>
                     }
+                    {/*{*/}
+                    {/*    inviteCode &&*/}
+                    {/*    <div>*/}
+                    {/*      <Badge code={inviteCode}/>*/}
+                    {/*    </div>*/}
+                    {/*}*/}
+
+                    {/* 徽章 */}
+                    {
+                        badges && badges.total_count >0 &&
+                        <Badge badges={badges} owner={owner} />
+                    }
+
                     {
                       lesson_url &&
                       <div>

src/forge/Main/Index.scss

@@ -200,6 +200,26 @@
       }
     }
   }
+
+  .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;
+      }
+    }
+  }
+
+
   .progress{
     display: flex;
     border-radius: 2px;

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 '/home/gitlink/forgeplus/public/react/forgeplus-react/src/forge/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

@@ -239,4 +239,59 @@ ul.ant-menu.menuStyle{
       content:"";
     }
   }
-}
+}
+
+.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;
+    }
+  }
+}
+
+
+.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

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Button, Spin , Menu } from "antd";
+import { Button, Spin , Menu, Popover } from "antd";
 import FocusButton from "../UsersList/focus_button";
 
 import axios from "axios";
@@ -13,6 +13,10 @@ import './Index.scss';
 
 import Loadable from "react-loadable";
 import Loading from "../../Loading";
+import Badge from "../Main/sub/Badge";
+
+//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"),
@@ -70,6 +74,7 @@ class Infos extends Component {
     };
   }
 
+
   renderPath=(pathname)=>{
     const { username } = this.props.match.params;
     if(pathname === `/${username}`){
@@ -130,7 +135,9 @@ class Infos extends Component {
       this.setState({
         user: result.data,
         isSpin: false,
-        undo_events:e
+        undo_events:e,
+        //测试数据
+        badges : {badge:[1, 2, 3], total_count: 3}
       });
     })
     .catch((error) => {
@@ -194,7 +201,7 @@ class Infos extends Component {
   render() {
     const { current_user } = this.props;
     const { username } = this.props.match.params;
-    const { user, isSpin, route_type , undo_events , menuKey } = this.state;
+    const { user, isSpin, route_type , undo_events , menuKey} = this.state;
     return (
       <div className="newMain clearfix">
         <Spin spinning={isSpin}>
@@ -275,7 +282,35 @@ class Infos extends Component {
                     </div>
                     :""
                   }
+
+
                 </div>
+
+                {
+                    badges && badges.total_count >0 &&
+                    <Badge badges={badges} />
+                }
+                {/*{*/}
+                {/*    badges && badges.total_count >0 &&*/}
+                {/*    <div className="list-l-Menu text-center">*/}
+                {/*        {*/}
+                {/*          badges.total_count > 0 ?   owner={owner} projectsId={projectsId} */}
+                {/*              badges.badge.map((item,key)=>{*/}
+                {/*                return(*/}
+                {/*                    <Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="top">*/}
+                {/*                      <div>*/}
+                {/*                        <span>{item}</span>*/}
+                {/*                        <img src={getImageUrl(`/${item.image_url}`)} />*/}
+                {/*                      </div>*/}
+                {/*                    </Popover>*/}
+                {/*                )*/}
+                {/*              })*/}
+                {/*              :""*/}
+                {/*        }*/}
+                {/*    </div>*/}
+
+                {/*}*/}
+
               </div>
             </div>
             <div className="list-right">