init 开源度量

src/forge/Server/Index.jsx

@@ -23,6 +23,11 @@ const Pages = Loadable({
   loader: () => import('./pages'),
   loading: Loading,
 })
+// 
+const Measurement = Loadable({
+  loader: () => import('./measurement'),
+  loading: Loading,
+})
 function ServerIndex(props){
   const { projectDetail } = props;
   const { owner , projectsId } = props.match.params;
@@ -42,6 +47,11 @@ function ServerIndex(props){
             () => (<Reposyncer {...props}/>)
           }
         ></Route>
+        <Route path="/:owner/:projectsId/service/measurement"
+          render={
+            () => (<Measurement {...props}/>)
+          }
+        ></Route>
         <Route path="/:owner/:projectsId/service/codeanalysis"
           render={
             () => (<Data {...props}/>)

src/forge/Server/List.jsx

@@ -79,6 +79,16 @@ function Main(props){
           <Link to={`/${owner}/${projectsId}/service/pages`} className="btnhover">查看详情</Link>
           </span>
         </li>}
+        <li>
+          <span className="servername">
+            <img src={require('./img/logo4.png')} alt=""/>
+            <a onClick={openDetail} style={{marginLeft:"-8px"}}>开源软件健康度量服务</a>
+          </span>
+          <p className="task-hide-2 serverdesc">支持项目健康度量分析一键生成，协助维护项目健康生态</p>
+          <span className="serverbtn">
+          <Link to={`/${owner}/${projectsId}/service/measurement`} className="btnhover">查看详情</Link>
+          </span>
+        </li>
       </ul>
     </div>
   )

src/forge/Server/index.scss

@@ -461,4 +461,32 @@
   .timeBox{
     color: rgba(70, 106, 255, 1)
   }
+}
+.nullStoreBox{
+  background-color:#fafcff;
+  border-radius:4px 4px 0px 0px;
+  text-align: center;
+  color:#333333;
+  padding-bottom: 65px;
+  .loBox{width: 68px;}
+  .introBox{
+    color:#666666;
+    width: 57%;
+    margin: 15px auto;
+    word-break: break-all;
+  }
+  .borBox{
+    width: 45%;
+    margin: 0 auto 20px;
+    border-bottom: 1px solid rgba(90, 117, 193, 0.23);
+  }
+}
+.headBox{
+  height:60px;
+  line-height: 60px;
+  background-color:#fafcff;
+  border:1px solid rgba(42, 97, 255, 0.23);
+  border-radius:3px 3px 0px 0px;
+  color:#333333;
+  position: relative;
 }

src/forge/Server/measurement/index.jsx

@@ -0,0 +1,55 @@
+import React, {useState, useEffect} from "react";
+import './index.scss';
+import Logo from '../img/logo4.png';
+import { Button , Spin } from 'antd';
+import Large from '../img/large.png';
+import Middle from '../img/middle.png';
+import Small from '../img/small.png';
+
+function Index(props){
+
+    const score = [
+        {name:"开发活动",total:40,score:30},
+        {name:"社区协作",total:40,score:30},
+        {name:"项目影响",total:40,score:30}
+    ]
+    return(
+        <div>
+            <div class="headBox font-16 pl15">开源软件健康度量服务</div>
+            <div class="nullStoreBox mt25">
+                <img src={Logo} class="loBox mt50" />
+                <p class="font-22 mt10">欢迎使用开源软件健康度量服务</p>
+                <div class="introBox font-15">开源软件健康度量服务是一种代码库分析工具，旨在通过深入分析代码库的关键活动数据来评估开源项目的健康状况。该服务通过收集和分析代码库中的贡献者、提交（commit）、合并请求（pulrequest）、疑修（issue）等数据指标，为项目开发者、维护者提供了一个全面的项目健康报告</div>
+                <div class="borBox"></div>
+                <Button type="primary" >开始体验</Button>
+                <div><Spin /><span className="ml5 color-blue">服务报告生成中...</span></div>
+            </div>
+            <div className="scorePanel">
+                <div className="scoreMain">
+                    <div>
+                        <img src={Large} alt="" />
+                        <p>开源生态健康度由“开发活动”、“社区协作”、“项目影响”三个总体维度对开源项目的健康状况进行分析并加权求和，用于反馈项目的总体健康状况。您可点击查询每一个维度的度量指标及可视化图表。</p>
+                    </div>
+                    <div>
+                        {
+                            score && 
+                            <ul className="">
+                                {
+                                    score.map((i,k)=>{
+                                        return(
+                                            <li>{i.score}{i.name}{i.score}/{i.total}</li>
+                                        )
+                                    })
+                                }
+                            </ul>
+                        }
+                    </div>
+                </div>
+                <div className="scoreDetail">
+
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Index;

src/forge/Server/measurement/index.scss

@@ -0,0 +1,6 @@
+.scorePanel{
+    .scoreMain{
+        display: flex;
+        
+    }
+}

src/forge/Server/reposyncer/index.scss

@@ -30,15 +30,6 @@
     border-color:#1a47ff;
   }
 }
-.reposyncerBox .headBox, .storeListBox .headBox{
-  height:60px;
-  line-height: 60px;
-  background-color:#fafcff;
-  border:1px solid rgba(42, 97, 255, 0.23);
-  border-radius:3px 3px 0px 0px;
-  color:#333333;
-  position: relative;
-}
 .reposyncerBox{
   padding-bottom: 60px;
   .helpBox1{
@@ -53,24 +44,6 @@
     align-items: center;
     cursor: default;
   }
-  .nullStoreBox{
-    background-color:#fafcff;
-    border-radius:4px 4px 0px 0px;
-    text-align: center;
-    color:#333333;
-    padding-bottom: 65px;
-    .loBox{width: 68px;}
-    .introBox{
-      color:#666666;
-      width: 57%;
-      margin: 15px auto;
-    }
-    .borBox{
-      width: 45%;
-      margin: 0 auto 20px;
-      border-bottom: 1px solid rgba(90, 117, 193, 0.23);
-    }
-  }
   .rightContentBox{
     display: flex;
     .leftNav{