概览+用户画像

src/forge/Component/layout.jsx

@@ -28,6 +28,11 @@ export const AlignTop = styled.div`{
   display:flex;
   align-items: flex-start;
 }`
+export const AlignAJBottom = styled.div`{
+  display:flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}`
 // 左右结构
 export const Box = styled.div`{
   display:flex;

src/forge/Notice/Index.scss

@@ -1,31 +1,20 @@
 .noticeMenu{
-  padding:0px 20px;
+  padding:0px 30px;
   display: flex;
   border-bottom: 1px solid #eee;
-  height: 54px;
-  line-height: 54px;
   li{
     font-size: 16px;
     padding:0px;
-    margin:0px 30px 0px 20px!important;
+    margin-right:30px;
-    height: 54px;
+    height: 70px;
-    line-height: 54px;
+    line-height: 70px;
     position: relative;
     transform: none;
     a{
       display: flex;
-      &>span{
-        position: relative;
-      }
     }
-    &.active a span:first-child::after{
+    &.active a span{
-      position: absolute;
+      color: #1890ff;
-      bottom: 0px;
-      height: 2px;
-      left: 0px;
-      content: "";
-      background-color: #1890ff;
-      width: 100%;
     }
     .unNum{
       color: #d38900;
@@ -44,8 +33,7 @@
   }
 }
 .notifyList{
-  padding:0px 20px;
+  padding:0px 30px;
-  min-height: 400px;
   li{
     display: flex;
     border-bottom: 1px solid #eee;

src/forge/Notice/Notify.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Nodata from '../Nodata';
-import {Pagination } from 'antd';
+import { Pagination , Spin } from 'antd';
 import { Link } from 'react-router-dom';
 import { getImageUrl } from 'educoder';
 import Axios from "axios";
@@ -11,9 +11,11 @@ function Notify(props){
   const [ list , setList ] = useState(undefined);
   const [ page , setPage ] = useState(1);
   const [ total , setTotal ] = useState(0);
+  const [ isSpin , setIsSpin ] = useState(true);
 
   useEffect(()=>{
     if(username){
+      setIsSpin(true);
       getList();
     }
   },[username,page])
@@ -28,6 +30,7 @@ function Notify(props){
       if(result){
         setList(result.data.applied_messages);
         setTotal(result.data.total_count);
+        setIsSpin(false);
       }
     }).catch(error=>{})
   }
@@ -45,7 +48,6 @@ function Notify(props){
         default:
           return <p>拒绝转移【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库</p>
       }
-
     }else{
       return ""
     }
@@ -53,9 +55,10 @@ function Notify(props){
 
   return(
     <div>
-      {
+      <Spin spinning={isSpin}>
-        list && list.length > 0 ? 
+        <div style={{minHeight:"400px"}}>
-        <div>
+          {
+          list && list.length > 0 ? 
           <ul className="notifyList">
             {
               list.map((i,k)=>{
@@ -74,10 +77,11 @@ function Notify(props){
               })
             }
           </ul>
+          :
+          ""
+        }
         </div>
-        :
+      </Spin>
-        ""
-      }
       {list && list.length === 0 && <Nodata _html="暂无通知" />}
       {
         total > limit && 

src/forge/Notice/UndoEvent.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Nodata from '../Nodata';
 import { FlexAJ } from '../Component/layout';
-import { Pagination , Popconfirm } from 'antd';
+import { Pagination , Popconfirm , Spin } from 'antd';
 import { Link } from 'react-router-dom';
 import { getImageUrl } from 'educoder';
 import Axios from 'axios';
@@ -12,9 +12,11 @@ function UndoEvent(props){
   const [ list , setList ] = useState(undefined);
   const [ page , setPage ] = useState(1);
   const [ total , setTotal ] = useState(0);
+  const [ isSpin , setIsSpin ] = useState(true);
 
   useEffect(()=>{
     if(username){
+      setIsSpin(true);
       getList();
     }
   },[username,page])
@@ -29,6 +31,7 @@ function UndoEvent(props){
       if(result){
         setList(result.data.applied_transfer_projects);
         setTotal(result.data.total_count);
+        setIsSpin(false);
       }
     }).catch(error=>{})
   }
@@ -57,9 +60,10 @@ function UndoEvent(props){
 
   return(
     <div>
-      {
+      <Spin spinning={isSpin}>
-        list && list.length > 0 ? 
+        <div style={{minHeight:"400px"}}>
-        <div>
+          {
+          list && list.length > 0 ? 
           <ul className="notifyList">
             {
               list.map((i,k)=>{
@@ -101,10 +105,11 @@ function UndoEvent(props){
               })
             }
           </ul>
+          :
+          ""
+        }
         </div>
-        :
+      </Spin>
-        ""
-      }
       {list && list.length === 0 && <Nodata _html="暂无接收信息" />}
       {
         total > limit && 

src/forge/users/Echart/Calendar.jsx

@@ -0,0 +1,113 @@
+import React ,{ useEffect, useState } from 'react';
+import * as echarts from 'echarts';
+import moment from 'moment';
+import Axios from 'axios';
+
+function Calendar({ userLogin , time , chooseTime }) {
+  const [ endT, setEndT ] = useState("");
+  const [ baginT, setBaginT ] = useState("");
+
+  useEffect(()=>{
+    if(time){
+      let e = `${time}-12-31`;
+      let b = `${time}-01-01`;
+      setEndT(e);
+      setBaginT(b);
+    }else if(time === ""){
+      let y = moment().get('year');
+      let m = moment().get('month');
+      let d = moment().get('date');
+      let e = `${y}-${m+1}-${d}`;
+      let b = `${y-1}-${m+1}-${d}`;
+      setEndT(e);
+      setBaginT(b);
+    }
+  },[time])
+
+  useEffect(()=>{
+    if(baginT && endT){
+      getData();
+    }
+  },[baginT,endT])
+
+  function getData() {
+    const url = `/users/${userLogin}/headmaps.json`;
+    Axios.get(url).then(result=>{
+      if(result && result.data){
+        let m = result.data.headmaps;
+        m.sort(compare('contributions'));
+        let max = m[m.length -1].contributions;
+        Init(m,max);
+      }
+    }).catch(error=>{})
+  }
+
+  function compare(property){
+    return function(a,b){
+      var value1 = a[property];
+      var value2 = b[property];
+      return value1 - value2;
+    }
+  }
+
+  function getVirtulData(data) {
+    var array = [];
+    for(var i=0;i<data.length;i++){
+      array.push([data[i].date,data[i].contributions]);
+    }
+    return array;
+  }
+
+  function Init(data,max) {
+    var huan_val = document.getElementById("Calendar");
+    var myEcharts = echarts.init(huan_val);
+    let option = {
+      title: {
+        show:false
+      },
+      tooltip: {},
+      visualMap: {
+        min: 0,
+        max: max,
+        type: 'piecewise',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: 40,
+        inRange:{
+          color:['#C7DBFF', '#5291FF']
+        }
+      },
+      calendar: {
+        top: 60,
+        left: 30,
+        right: 0,
+        cellSize: ['auto', 13],
+        range: [baginT, endT],
+        itemStyle: {
+          borderWidth: 0.5
+        },
+        yearLabel: {show: false},
+        monthLabel:{
+          nameMap:"cn"
+        },
+        dayLabel:{
+          nameMap:"cn"
+        }
+      },
+      series: {
+        type: 'heatmap',
+        coordinateSystem: 'calendar',
+        data: getVirtulData(data)
+      }
+    };
+    myEcharts.setOption(option);
+    myEcharts.on('click', function (params) {
+      chooseTime(params.data);
+    });
+  }
+
+  return(
+    <div id="Calendar" style={{height:"230px"}}></div>
+  )
+}
+export default Calendar;

src/forge/users/Echart/Cloud.jsx

@@ -9,30 +9,35 @@ function Cloud({data}) {
 
   function optionChart1(){
     var div = new Js2WordCloud(document.getElementById('cloud'))
-    let textList=[
+    let textList=['服务', '细致', '意识', '踏实','开发', '反馈']
-        ['服务'], ['细致'], ['意识'], ['踏实'],['开发'], ['反馈'], ['协助'],['使用'],['谈判']
-    ]
     let cyList=[]
-    for(let i=0;i<60;i++){
+    for(let i=0;i<textList.length;i++){
-      cyList.push([textList[parseInt(Math.random()*textList.length)],Math.round(Math.random()*10)+1])
+      cyList.push([textList[i],textList.length-i])
     }
     div.setOption({
       backgroundColor:'transparent',
       shape: 'circle',
-      // ellipticity: 1,//椭圆
+      ellipticity: 1,//椭圆
-      maxFontSize: 40,//最大字号
+      maxFontSize: 21,//最大字号
-      minFontSize: 12,//最小字号
+      minFontSize: 16,//最小字号
       tooltip: {
         show: true
       },
       list: cyList,
       color(word, weight, fontSize, distance, theta) { //自定义颜色、透明度
-        if (fontSize>=12 && fontSize<=20) {
+        switch(fontSize){
-            return 'rgb(29,227,250,0.3)';
+          case 21:
-        } else if(fontSize>20 && fontSize<=30){
+            return "#f8e367"
-            return 'rgb(29,227,250,0.6)';
+          case 20:
-        }else if(fontSize>30 && fontSize<=40){
+            return "#99dfff"
-            return 'rgb(29,227,250)';
+          case 19:
+            return "#ff9e48"
+          case 18:
+            return "#5ea6ff"
+          case 17:
+            return "#58c0f0"
+          default:
+            return "#bcbcbc"
         }
       },
     })

src/forge/users/Echart/Line.jsx

@@ -19,19 +19,21 @@ function Line({data}) {
       color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"],
       title: {
         text: '近期活动统计',
-        left: '3%'
+        left: '3%',
+        top:"3%"
       },
       tooltip: {
         trigger: 'axis'
       },
       legend: {
         data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
-        right: '3%'
+        right: 'center',
+        bottom: '0',
       },
       grid: {
-        left: '3%',
+        left: '4%',
         right: '4%',
-        bottom: '3%',
+        bottom: '12%',
         containLabel: true
       },
       toolbox: {
@@ -42,7 +44,10 @@ function Line({data}) {
       xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+          axisTick:{
+            show:false
+          }
       },
       yAxis: {
           type: 'value',

src/forge/users/GeneralView/Activity.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { AlignCenter } from '../../Component/layout';
+import { TagInfo } from '../../Utils/TagColor';
+import { getImageUrl } from 'educoder';
+
+function Activity() {
+  return(
+    <ul className="infosActivity">
+      <li>
+        <Link to={``}><img src={getImageUrl(`/system/lets/letter_avatars/2/D/169_162_140/120.png`)} alt="" className="aImg"/></Link>
+        <div className="aInfos">
+          <AlignCenter>
+            <Link to={``} className="name">蔡世</Link>
+            <span className="time">1小时前</span>
+            {TagInfo("立刻","")}
+            <span className="status">已关闭</span>
+          </AlignCenter>
+          <p className="aDesc">更新了问题状态：动态详情动态详情动态详情动态详情动态详情</p>
+        </div>
+      </li>
+    </ul>
+  )
+}
+export default Activity;

src/forge/users/GeneralView/ConcentrateBox.jsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { Modal , Checkbox , Pagination , Button , Spin } from 'antd';
+import Axios from 'axios';
+import { Link } from 'react-router-dom';
+import { FlexAJ } from '../../Component/layout';
+
+const limit = 20;
+function ConcentrateBox({ visible , onCancel , onSure , username , choosed }) {
+  const [ page , setPage ]= useState(1);
+  const [ total , setTotal ]= useState(0);
+  const [ list , setList ]= useState(undefined);
+  const [ value , setValue ]= useState([]);
+  const [ isSpin , setIsSpin ]= useState(true);
+  const [ disable , setDisable ] = useState(false);
+  
+  useEffect(()=>{
+    if(visible){
+      setIsSpin(true);
+      getProjectList();
+    }
+  },[visible,page])
+
+  useEffect(()=>{
+    if(choosed && choosed.length >0 ){
+      setValue(choosed);
+    }
+  },[choosed])
+
+  useEffect(()=>{
+    if(value && value.length === 6){
+      setDisable(true);
+    }else{
+      setDisable(false);
+    }
+  },[value])
+
+  function getProjectList() {
+    const url =  `/users/${username}/projects.json`;
+    Axios.get(url,{
+      params:{
+        page,limit,is_public: "public"
+      }
+    }).then(result=>{
+      if(result && result.data){
+        setTotal(result.data.count);
+        setList(result.data.projects);
+        setIsSpin(false);
+      }
+    }).catch(error=>{})
+  }
+
+  function onOk() {
+    onSure && onSure(value);
+    setValue([]);
+  }
+
+  function chooseProject(params) {
+    setValue(params);
+  }
+
+  return(
+    <Modal 
+      visible={visible}
+      title={'选择精选项目'}
+      closable={false}
+      width={500}
+      className="ConcentrateBox"
+      footer={
+        <FlexAJ>
+          {total > limit && 
+            <Pagination size={"small"} simple current={page} pageSize={limit} onChange={(p)=>setPage(p)} total={total}/>
+          }
+          <span>
+            <Button onClick={onCancel}>取消</Button>
+            <Button type={"primary"} className="ml20" onClick={onOk}>确定</Button>
+          </span>
+        </FlexAJ>
+      }
+    >
+      <Spin spinning={isSpin}>
+        {
+          list && list.length > 0 &&
+          <Checkbox.Group value={value} onChange={chooseProject} style={{width:"100%"}}>
+            {
+              list.map((i,k)=>{
+                return(
+                  <Checkbox value={i.id} disabled={disable && (value.filter(j=>j === i.id).length===0)}>{i.name}</Checkbox>
+                )
+              })
+            }
+          </Checkbox.Group>
+        }
+        { list && list.length === 0 && <div style={{textAlign:"center"}}>您还没有公开的项目，先去<Link to={`/projects/deposit/new`} className="color-blue">新建项目</Link></div> }
+      </Spin>
+    </Modal>
+  )
+}
+export default ConcentrateBox;

src/forge/users/GeneralView/ConcentrateProject.jsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import { AlignAJBottom , AlignCenter } from '../../Component/layout';
+import { Link } from 'react-router-dom';
+import { Spin } from 'antd';
+import axios from 'axios';
+
+import Box from './ConcentrateBox';
+
+function ConcentrateProject({userLogin,current}) {
+  const [ list , setList ] = useState(undefined);
+  const [ visible , setVisible ] = useState(false);
+  const [ isSpin , setIsSpin ] = useState(false);
+  const [ value , setValue ] = useState([]);
+
+  useEffect(()=>{
+    setIsSpin(true);
+    getList();
+  },[])
+
+  function getList() {
+    const url = `/users/${userLogin}/is_pinned_projects.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        let p = result.data.projects;
+        setList(p);
+        setIsSpin(false);
+        if(p && p.length > 0){
+          let array = p.map(i=>{
+            return i.id
+          })
+          setValue(array);
+        }
+      }
+    }).catch(erroer=>{})
+  }
+
+  function onSure(is_pinned_project_ids) {
+    const url = `/users/${userLogin}/is_pinned_projects/pin.json`;
+    axios.post(url,{
+      is_pinned_project_ids
+    }).then(result=>{
+      if(result && result.data){
+        setVisible(false);
+        setIsSpin(true);
+        getList();
+      }
+    }).catch(error=>{})
+  }
+  return(
+    <Spin spinning={isSpin}>
+      <Box visible={visible} onCancel={()=>setVisible(false)} onSure={onSure} username={userLogin} choosed={value}/>
+      {
+        list && list.length>0 &&
+        <div className="concentrate">
+          <AlignAJBottom>
+            <span className="font-18">精选项目</span>
+            { current && <a className="color-blue" onClick={()=>setVisible(true)}>自定义精选项目</a> }
+          </AlignAJBottom>
+          <div>
+            <ul className="concentrateUl">
+              {
+                list.map((i,k)=>{
+                  return(
+                    <li>
+                      <Link to={`/projects/${userLogin}/${i.identifier}`} className="name">{i.name}</Link>
+                      <p className="task-hide desc">{i.description}</p>
+                      <AlignCenter>
+                        { i.category && <span className="tagName">{i.category.name}</span> }
+                        <span className="pariseCount"><i className="iconfont icon-guanzhu"></i>{i.watchers_count}</span>
+                        <span className="forkCount"><i className="iconfont icon-fork"></i>{i.forked_count}</span>
+                      </AlignCenter>
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          </div>
+        </div>
+      }
+      {
+        list && list.length === 0 && current && <div className="ConcentrateTip"><i className="iconfont icon-tishi2"></i>你还没有设置精选项目，<a onClick={()=>setVisible(true)}>点击设置</a></div>
+      }
+    </Spin>
+  )
+}
+export default ConcentrateProject;

src/forge/users/GeneralView/Index.jsx

@@ -1,22 +1,54 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './Index.scss';
 import  'echarts/lib/component/tooltip';
 import  'echarts/lib/component/title';
 import  'echarts/lib/component/legend'
 import  'echarts/lib/component/markPoint';
 
-import Pie from '../Echart/Pie';
+import { Select , Pagination } from 'antd';
-import Line from '../Echart/Line';
-import Radar from '../Echart/Radar';
-import Cloud from '../Echart/Cloud';
 
+import { FlexAJ } from '../../Component/layout';
+import Line from '../Echart/Line';
+import Calendar from '../Echart/Calendar';
+import ConcentrateProject from './ConcentrateProject';
+import Activity from './Activity';
+
+const aLimit = 5;
 function Index(props) {
+  const [ page , setPage ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const username = props.match.params.username;
+  const current_user = props.current_user;
+
+  // 在贡献度日历表中选择一个时间
+  function chooseTime(data) {
+    if(data){
+      console.log(data);
+    }
+  }
+
   return(
     <div>
-      <Pie />
+      <div>
-      <Line />
+        <ConcentrateProject userLogin={username} current={current_user && (current_user.login === username)}/>
-      <Radar />
+      </div>
-      <Cloud />
+      <div className="recentStatic">
+        <Line />
+      </div>
+      <div className="calendarStatic">
+        <FlexAJ>
+          <span className="font-18">贡献度</span>
+          <Select style={{width:"200px"}} placeholder="选择年份">
+            <Select.Option key="2021">2021</Select.Option>
+          </Select>
+        </FlexAJ>
+        <Calendar time={''} userLogin={username} chooseTime={chooseTime}/>
+      </div>
+      <div className="activeStatic">
+        <span className="font-18">动态</span>
+        <Activity />
+        { total > aLimit && <div style={{textAlign:'center',paddingBottom:"30px"}}><Pagination pageSize={aLimit} current={page} total={total} onChange={(p)=>setPage(p)}/></div> }
+      </div>
     </div>
   )
 }

src/forge/users/GeneralView/Index.scss

@@ -0,0 +1,128 @@
+.concentrate{
+  padding:20px 30px;
+  .concentrateUl{
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 15px;
+    li{
+      width: 48.5%;
+      margin-right: 3%;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      background-color: #fafafa;
+      padding:15px 20px;
+      cursor: default ;
+      &:nth-child(2n){
+        margin-right: 0px;
+      }
+      .name{
+        font-size: 16px;
+        color: #4CACFF;
+      }
+      .desc{
+        color: #999;
+      }
+      .tagName{
+        display: block;
+        background-color: #f7f5f5;
+        border-radius: 3px;
+        color: #666;
+        padding:0px 10px;
+        height: 22px;
+        line-height: 22px;
+        font-size: 13px;
+      }
+      .pariseCount,.forkCount{
+        i{
+          font-size: 14px!important;
+          margin-right: 4px;
+        }
+        color: #999;
+        margin-left: 20px;
+      }
+    }
+  }
+}
+.ConcentrateTip{
+  margin:20px 30px;
+  padding:5px 20px;
+  border:1px solid rgb(248, 56, 56);
+  border-radius: 4px;
+  background-color: rgba(248, 56, 56,0.1);
+  color: rgb(248, 56, 56);
+  display: flex;
+  align-items: center;
+  a{
+    color: #4cacff;
+  }
+  i{
+    font-size: 15px!important;
+    margin-right: 5px;
+  }
+}
+.ConcentrateBox{
+  .ant-modal-body{
+    min-height: 258px;
+  }
+  .ant-checkbox-group{
+    display: flex;
+    flex-wrap: wrap;
+    .ant-checkbox-wrapper{
+      width: 50%;
+      margin-left: 0px!important;
+      display: flex;
+      .ant-checkbox{
+        padding-top: 3px;
+      }
+      span:last-child{
+        flex:1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.recentStatic{
+  padding-bottom: 30px;
+}
+.calendarStatic,.activeStatic{
+  padding:0px 30px;
+  .infosActivity{
+    padding-bottom: 30px;
+    &>li{
+      display: flex;
+      border-bottom:1px solid #eee;
+      align-items: center;
+      padding:20px 0px;
+      .aImg{
+        width: 48px;
+        height: 48px;
+        margin-right: 20px;
+        border-radius: 50%;
+      }
+      .aInfos{
+        flex: 1;
+        span{
+          margin-left: 20px;
+          margin-right: 0px;
+        }
+        .name{
+          font-size: 16px;
+          color:#333;
+        }
+        .time,.status{
+          color: #999;
+        }
+        .aDesc{
+          color: #666;
+          margin-top: 5px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}

src/forge/users/Index.scss

@@ -1,6 +1,6 @@
 $flex:flex;
 .headerbox{
-  padding:20px 40px;
+  padding:20px 30px;
   border-bottom: 1px solid #E0E0E0;
   display: $flex;
   align-items: center;
@@ -25,7 +25,7 @@ $flex:flex;
   }
 }
 .contentBox{
-  padding:20px 40px 0px 40px;
+  padding:20px 30px 0px 30px;
   & > div{
     margin-bottom: 20px;
     display: $flex;
@@ -97,6 +97,7 @@ ul.ant-menu.menuStyle{
     line-height: 70px;
     padding:0px;
     margin-right: 30px!important;
+    border-bottom:transparent!important;
   }
 }
 .disposeInfo{
@@ -135,4 +136,31 @@ ul.ant-menu.menuStyle{
     padding:28px 0px;
     border-bottom: 1px solid #eee;
   }
+}
+
+.infosRightMenu{
+  padding:0px 10px;
+  .ant-menu-item{
+    padding:0px;
+    margin:0px 20px!important;
+    font-size: 17px;
+    height: 60px;
+    line-height: 60px;
+    border-bottom: 2px solid transparent!important;
+    position: relative;
+    .menuNum{
+      font-size: 12px;
+      margin-left: 3px;
+      color: #FF6E21;
+    }
+    &.ant-menu-item-selected::before{
+      position: absolute;
+      width: 16px;
+      bottom: 7px;
+      height: 2px;
+      left: 0px;
+      background-color: #1890ff;
+      content:"";
+    }
+  }
 }

src/forge/users/Infos.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { Avatar, Tag, Button, Spin } from "antd";
+import { Avatar, Tag, Button, Spin , Menu } from "antd";
 import FocusButton from "../UsersList/focus_button";
 
 import axios from "axios";
@@ -24,6 +24,10 @@ const InfosDevOpsCD = Loadable({
   loading: Loading,
 });
 
+const Statistics = Loadable({
+  loader: () => import("./Statistics/Index"),
+  loading: Loading,
+}); 
 const GeneralView = Loadable({
   loader: () => import("./GeneralView/Index"),
   loading: Loading,
@@ -59,19 +63,45 @@ class Infos extends Component {
       project_type: undefined,
       route_type: undefined,
       undo_events:0,
-      undo_messages:0
+      undo_messages:0,
+      menuKey:"0"
     };
   }
 
+  renderPath=(pathname)=>{
+    const { username } = this.props.match.params;
+    if(pathname === `/users/${username}`){
+      this.setState({menuKey:"0"});
+    }else if(pathname === `/users/${username}/statistics`){
+      this.setState({menuKey:"1"});
+    }else if(pathname.indexOf(`/users/${username}/projects`)>-1){
+      this.setState({menuKey:"2"});
+    }else if(pathname === `/users/${username}/notice`){
+      this.setState({menuKey:"3"});
+    }else if(pathname.indexOf(`/users/${username}/devops`)>-1){
+      this.setState({menuKey:"4"});
+    }else if(pathname === `/users/${username}/organizes`){
+      this.setState({menuKey:"5"});
+    }
+  }
+
   componentDidMount = () => {
     this.fetchUser();
+    const { pathname } = this.props.location;
+    this.renderPath(pathname);
   };
+
   componentDidUpdate=(prevProps)=>{
     const { username } = this.props.match.params;
     const prevUser = prevProps.match.params.username;
     if(prevUser && username && prevUser !== username){
       this.fetchUser();
     }
+    const { pathname } = this.props.location;
+    const prevPath = prevProps.location.pathname;
+    if(prevPath && pathname && prevPath !== pathname){
+      this.renderPath(pathname);
+    }
     this.props.history.listen(()=>{
       if (document.body.scrollTop || document.documentElement.scrollTop > 0) {
         window.scrollTo(0, 0)
@@ -110,19 +140,19 @@ class Infos extends Component {
       });
   };
 
-  change_project_type = (type) => {
+  // change_project_type = (type) => {
-    const {user} = this.state
+  //   const {user} = this.state
-    this.setState({
+  //   this.setState({
-      project_type: type ,
+  //     project_type: type ,
-      route_type: undefined
+  //     route_type: undefined
-    })
+  //   })
-    let url = `/users/${user && user.login}`
+  //   let url = `/users/${user && user.login}`
-    if (type){
+  //   if (type){
-      url = `/users/${user && user.login}/projects/${type}`
+  //     url = `/users/${user && user.login}/projects/${type}`
-    }
+  //   }
-    this.props.history.push(url)
+  //   this.props.history.push(url)
     
-  };
+  // };
 
   change_devops_type=(type)=>{
     const {user} = this.state;
@@ -165,18 +195,15 @@ class Infos extends Component {
     const { current_user, mygetHelmetapi } = this.props;
     const { username } = this.props.match.params;
 
-    const { user, isSpin, project_type, route_type , undo_events , undo_messages } = this.state;
+    const { user, isSpin, project_type, route_type , undo_events , undo_messages , menuKey } = this.state;
     return (
       <div className="newMain clearfix">
         <Spin spinning={isSpin}>
           <div className="new-content-flex">
             <div className="list-left" style={{border:"none"}}>
               <div className="bgcF">
-                <div className="list-l-Menu text-center pd20 ">
+                <div className="list-l-Menu text-center pd20">
-                  <Avatar
+                  <Avatar size={110} src={getImageUrl(`/${user && user.image_url}`)} />
-                    size={110}
-                    src={getImageUrl(`/${user && user.image_url}`)}
-                  />
                   {user && user.user_identity && (
                     <div className="mt-n15 position-relative">
                       <Tag color="#FF6E21" style={{marginRight:"0px"}}>{user && user.user_identity}</Tag>
@@ -185,7 +212,6 @@ class Infos extends Component {
                   <div className="text-center mt15 font-16 fwb">
                     {user && user.username}
                   </div>
-
                   <div>
                     {user && current_user && user.login === current_user.login && (
                       <div className="user-info-star-button ">
@@ -236,161 +262,169 @@ class Infos extends Component {
                   </div>
                 </div>
               </div>
-              {current_user && user && user.login === current_user.login ? (
+              {/* <div className="bgcF">
-                <div className="bgcF">
+                <div className="list-l-Menu">
-                  <div className="list-l-Menu">
+                  <li className={project_type && project_type === "notice" ? "active" : ""}>
-                    <li className={project_type && project_type === "notice" ? "active" : ""}>
+                    <p onClick={() => this.undo_link()}>
-                      <p onClick={() => this.undo_link()}>
+                      <span className="font-16 color-grey-3">
-                        <span className="font-16 color-grey-3">
+                        <i className="iconfont icon-dahuizhongzuo3x font-15 mr5"></i>
-                          <i className="iconfont icon-dahuizhongzuo3x font-15 mr5"></i>
+                        待办事项
-                          待办事项
+                      </span>
-                        </span>
+                      <span className="text-yellow font-16">
-                        <span className="text-yellow font-16">
+                        {undo_events}
-                          {undo_events}
+                      </span>
-                        </span>
+                    </p>
-                      </p>
+                  </li>
-                    </li>
-                  </div>
                 </div>
-              ):""}
+              </div>
-              
+            
+            <div className="bgcF">
+              <ul className="list-l-Menu">
+                <li className="MenuTitle" onClick={() => this.change_project_type(undefined)}>
+                  <i className="iconfont icon-xiangmuleixing font-15 mr5"></i>
+                  项目类型
+                  <i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
+                </li>
+                <li className={project_type && project_type === "common" ? "active" : ""}  onClick={() => this.change_project_type("common")}>
+                  <p>
+                    <span className="font-16">开源托管项目</span>
+                    <span className="color-blue">
+                      {user && user.common_projects_count}
+                    </span>
+                  </p>
+                </li>
+                <li className={project_type && project_type === "mirror" ? "active" : ""}  onClick={() => this.change_project_type("mirror")}>
+                  <p>
+                    <span className="font-16">开源镜像项目</span>
+                    <span className="color-blue">
+                      {user && user.mirror_projects_count}
+                    </span>
+                  </p>
+                </li>
+                <li className={project_type && project_type === "sync_mirror" ? "active" : ""}  onClick={() => this.change_project_type("sync_mirror")}>
+                  <p>
+                    <span className="font-16">镜像托管项目</span>
+                    <span className="color-blue">
+                      {user && user.sync_mirror_projects_count}
+                    </span>
+                  </p>
+                </li>
+              </ul>
+            </div>
+            
               <div className="bgcF">
                 <ul className="list-l-Menu">
-                  <li className="MenuTitle" onClick={() => this.change_project_type(undefined)}>
+                  <li className="MenuTitle">
-                    <i className="iconfont icon-xiangmuleixing font-15 mr5"></i>
+                    <i className="iconfont icon-gongzuoliu font-15 mr5"></i>
-                    项目类型
+                    DevOps工作流
                     <i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
                   </li>
-                  <li className={project_type && project_type === "common" ? "active" : ""}  onClick={() => this.change_project_type("common")}>
+                  <li className={project_type && project_type === "CIService" ? "active" : ""}  onClick={() => this.change_devops_type("CIService")}>
                     <p>
-                      <span className="font-16">开源托管项目</span>
+                      <span className="font-16 color-grey-3">CI服务</span>
-                      <span className="color-blue">
-                        {user && user.common_projects_count}
-                      </span>
-                    </p>
-                  </li>
-                  <li className={project_type && project_type === "mirror" ? "active" : ""}  onClick={() => this.change_project_type("mirror")}>
-                    <p>
-                      <span className="font-16">开源镜像项目</span>
-                      <span className="color-blue">
-                        {user && user.mirror_projects_count}
-                      </span>
-                    </p>
-                  </li>
-                  <li className={project_type && project_type === "sync_mirror" ? "active" : ""}  onClick={() => this.change_project_type("sync_mirror")}>
-                    <p>
-                      <span className="font-16">镜像托管项目</span>
-                      <span className="color-blue">
-                        {user && user.sync_mirror_projects_count}
-                      </span>
                     </p>
                   </li>
                 </ul>
               </div>
-              {
+            <div className="bgcF">
-                current_user && current_user.login && current_user.login === username &&
+              <div className="list-l-Menu">
-                <div className="bgcF">
+                <li className={project_type && project_type === "organizes" ? "active" : ""}>
-                  <ul className="list-l-Menu">
+                  <p onClick={() => this.organize_link()} >
-                    <li className="MenuTitle">
+                    <span className="font-16 color-grey-3">
-                      <i className="iconfont icon-gongzuoliu font-15 mr5"></i>
+                      <i className="iconfont icon-itsm-liuchengguanli font-15 mr5"></i>
-                      DevOps工作流
+                      组织
-                      <i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
+                    </span>
-                    </li>
+                    <span className="color-blue font-16">
-                    <li className={project_type && project_type === "CIService" ? "active" : ""}  onClick={() => this.change_devops_type("CIService")}>
+                      {user && user.user_org_count}
-                      <p>
+                    </span>
-                        <span className="font-16 color-grey-3">CI服务</span>
+                  </p>
-                      </p>
+                </li>
-                    </li>
-                    {/* <li className={project_type && project_type === "CDService" ? "active" : ""}  onClick={() => this.change_devops_type("CDService")}>
-                      <p>
-                        <span className="font-16">CD服务</span>
-                        <span className="color-blue">
-                          {user && user.common_projects_count}
-                        </span>
-                      </p>
-                    </li> */}
-                  </ul>
-                </div>
-              }
-              <div className="bgcF">
-                <div className="list-l-Menu">
-                  <li className={project_type && project_type === "organizes" ? "active" : ""}>
-                    <p onClick={() => this.organize_link()} >
-                      <span className="font-16 color-grey-3">
-                        <i className="iconfont icon-itsm-liuchengguanli font-15 mr5"></i>
-                        组织
-                      </span>
-                      <span className="color-blue font-16">
-                        {user && user.user_org_count}
-                      </span>
-                    </p>
-                  </li>
-                </div>
               </div>
+            </div> */}
             </div>
             <div className="list-right">
+              <Menu selectedKeys={[menuKey]} mode={`horizontal`} className="infosRightMenu">
+                <Menu.Item key="0"><Link to={`/users/${user && user.login}`}>概览</Link></Menu.Item>
+                <Menu.Item key="1"><Link to={`/users/${user && user.login}/statistics`}>数据统计</Link></Menu.Item>
+                <Menu.Item key="2"><Link to={`/users/${user && user.login}/projects/common`}>项目</Link></Menu.Item>
+                {
+                  current_user && user && user.login === current_user.login ?
+                  <Menu.Item key="3"><Link to={`/users/${user && user.login}/notice`}>待办事项<span className="menuNum">({undo_events})</span></Link></Menu.Item>
+                  :""
+                }
+                {
+                  current_user && current_user.login && current_user.login === username ?
+                  <Menu.Item key="4"><Link to={`/users/${user && user.login}/devops/CIService`}>DevOps工作流</Link></Menu.Item>
+                  :""
+                }
+                <Menu.Item key="5"><Link to={`/users/${user && user.login}/organizes`}>组织<span className="menuNum">({user && user.user_org_count})</span></Link></Menu.Item>
+              </Menu>
               {user && (
-                <div>
+              <Switch {...this.props}>
-                  <Switch {...this.props}>
+                <Route
+                    path="/users/:username/watchers"
+                    render={() => {
+                      return <WatchsUser {...this.props} {...this.state} userType="watchers" />;
+                    }}
+                  ></Route>
                   <Route
-                      path="/users/:username/watchers"
+                    path="/users/:username/notice"
-                      render={() => {
+                    render={() => {
-                        return <WatchsUser {...this.props} {...this.state} userType="watchers" />;
+                      return <Notice {...this.props} {...this.state} fetchUser={this.fetchUser}/>;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/users/:username/notice"
+                    path="/users/:username/fan_users"
-                      render={() => {
+                    render={() => {
-                        return <Notice {...this.props} {...this.state} fetchUser={this.fetchUser}/>;
+                      return <FanUser {...this.props} {...this.state} userType="fan_users"/>;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/users/:username/fan_users"
+                    path="/users/:username/devops/CDService"
-                      render={() => {
+                    render={() => {
-                        return <FanUser {...this.props} {...this.state} userType="fan_users"/>;
+                      return <InfosDevOpsCD {...this.props} {...this.state} />;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/users/:username/devops/CDService"
+                    path="/users/:username/devops/CIService"
-                      render={() => {
+                    render={() => {
-                        return <InfosDevOpsCD {...this.props} {...this.state} />;
+                      return <InfosDevOps {...this.props} {...this.state} />;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/users/:username/devops/CIService"
+                    path="/users/:username/projects/:project_type"
-                      render={() => {
+                    render={() => {
-                        return <InfosDevOps {...this.props} {...this.state} />;
+                      return <InfosUser {...this.props} {...this.state} />;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/users/:username/projects/:project_type"
+                    path="/users/:username/organizes"
-                      render={() => {
+                    render={() => {
-                        return <InfosUser {...this.props} {...this.state} />;
+                      return <Organize {...this.props} {...this.state} />;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/users/:username/organizes"
+                    path="/users/:username/statistics"
-                      render={() => {
+                    render={(props) => {
-                        return <Organize {...this.props} {...this.state} />;
+                      return <Statistics {...this.props} {...this.state} />;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/users/:username"
+                    path="/users/:username"
-                      render={(props) => {
+                    render={(props) => {
-                        return <InfosUser {...this.props} {...this.state} />;
+                      return <GeneralView {...this.props} {...this.state} />;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                    <Route
+                  <Route
-                      path="/"
+                    path="/"
-                      render={(props) => {
+                    render={(props) => {
-                        return <InfosUser {...this.props} {...this.state} />;
+                      return <GeneralView {...this.props} {...this.state} />;
-                      }}
+                    }}
-                    ></Route>
+                  ></Route>
-                  </Switch>
+                </Switch>
-                </div>
               )}
             </div>
-        </div>
+          </div>
         </Spin>
       </div>
     );

src/forge/users/InfosUser.js

@@ -100,9 +100,6 @@ class InfosUser extends Component {
     const {is_public} = this.state
     const new_is_public = is_public === check_is_public ? undefined : check_is_public
 
-    // this.setState({
-    //   is_public: new_is_public
-    // })
     this.state.is_public = new_is_public
     this.get_projects(new_is_public);
   }

src/forge/users/Statistics/Index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import './Index.scss';
+import  'echarts/lib/component/tooltip';
+import  'echarts/lib/component/title';
+import  'echarts/lib/component/legend'
+import  'echarts/lib/component/markPoint';
+
+import Pie from '../Echart/Pie';
+import Cloud from '../Echart/Cloud';
+import Radar from '../Echart/Radar';
+
+function Index() {
+  return(
+    <div>
+      <Pie />
+      <Cloud />
+      <Radar />
+    </div>
+  )
+}
+export default Index;