增加badge的svg

src/App.js

@@ -87,6 +87,7 @@ const Search = Loadable({
   loader: () => import('./modules/search/'),
   loading: Loading,
 })
+
 const WikiPreview = Loadable({
   loader: () => import('./forge/Wiki/Preview'),
   loading: Loading,
@@ -139,6 +140,11 @@ const WebIDE = Loadable({
   loader: () => import('./forge/Newfile/webIDE'),
   loading: Loading,
 });
+
+const Badge = Loadable({
+  loader: () => import('./forge/Badge/Index'),
+  loading: Loading,
+})
 // const CreateMerge = Loadable({
 //   loader: () => import('./forge/Merge/NewMerge'),
 //   loading: Loading,
@@ -328,6 +334,13 @@ class App extends Component {
                 }
               } />
 
+                {/* svg */}
+              <Route path="/:owner/:projectsId/badge/:type" render={
+                (props) => {
+                  return (<Badge {...this.props} {...props} {...this.state} />)
+                }
+              } />
+
                {/* webIDE */}
                <Route path="/:owner/:projectsId/webIDE/tree/:branchName"
                   render={

src/forge/Badge/Index.jsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from "react";
+import axios from 'axios';
+import { setSeoMeta } from 'educoder';
+
+function Badge(props) {
+  const { match, history } = props;
+  const { projectsId, owner, type } = match.params;
+
+  if (!["watch.svg", "star.svg", "fork.svg"].includes(type)) {
+    history.push('/nopage');
+  }
+
+  // 可以注释请求后，使用mock数据测试不同数值的场景
+  // {
+  //   watchers_count: 10,
+  //   praises_count: 0,
+  //   forked_count: 1200,
+  // }
+  const [projectDetail, setProjectDetail] = useState();
+  const [text, setText] = useState("");
+
+  // 查询项目详情，获取三种数值
+  useEffect(() => {
+    const url = `/${owner}/${projectsId}/detail.json`;
+    axios.get(url).then((result) => {
+      if (result && result.data) {
+        if (result.data.status === 404) {
+          this.props.history.push('/nopage');
+        } else {
+          setProjectDetail(result.data);
+          // seo优化设置
+          let keyWords = `${owner},${projectsId},${result.data.author.name},`;
+          let title = `${owner}/${projectsId}${result.data.description ? '：' + result.data.description : ''}`;
+          setSeoMeta(keyWords, title, result.data.description, `/${owner}/${projectsId}`, owner, projectsId);
+        }
+      }
+    }).catch((error) => { })
+  }, [projectsId, owner]);
+
+  useEffect(() => {
+    if (projectDetail) {
+      if (type === "watch.svg") {
+        setText(`${coutTranslate(projectDetail.watchers_count)} 关注数`);
+      } else if (type === "star.svg") {
+        setText(`${coutTranslate(projectDetail.praises_count)} 点赞数`);
+      } else if (type === "fork.svg") {
+        setText(`${coutTranslate(projectDetail.forked_count)} Fork数`);
+      }
+    }
+  }, [type, projectDetail]);
+
+  function coutTranslate(num) {
+    if (num < 1000) {
+      return num;
+    } else if (num >= 1000 & num < 10000) {
+      return (num / 1000).toFixed(1) + 'k';
+    } else {
+      return (num / 1000).toFixed(0) + 'k';
+    }
+  }
+
+  return <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="148" height="44" viewBox="0 0 148 44">
+    <defs>
+      <filter id="矩形_234" x="0" y="0" width="148" height="44" filterUnits="userSpaceOnUse">
+        <feOffset input="SourceAlpha" />
+        <feGaussianBlur stdDeviation="3" result="blur" />
+        <feFlood floodColor="#0c1a75" floodOpacity="0.161" />
+        <feComposite operator="in" in2="blur" />
+        <feComposite in="SourceGraphic" />
+      </filter>
+      <filter id="矩形_235" x="0" y="0" width="148" height="44" filterUnits="userSpaceOnUse">
+        <feOffset input="SourceAlpha" />
+        <feGaussianBlur stdDeviation="3" result="blur-2" />
+        <feFlood floodColor="#445a64" floodOpacity="0.161" />
+        <feComposite operator="in" in2="blur-2" />
+        <feComposite in="SourceGraphic" />
+      </filter>
+      <linearGradient id="linear-gradient" x1="0.494" y1="-0.055" x2="1.494" y2="-0.055" gradientUnits="objectBoundingBox">
+        <stop offset="0" stopColor="#6dffff" />
+        <stop offset="1" stopColor="#0080ff" />
+      </linearGradient>
+    </defs>
+    <g id="组_1758" data-name="组 1758" transform="translate(-1468 -507)">
+      <g transform="matrix(1, 0, 0, 1, 1468, 507)" filter="url(#矩形_234)">
+        <path id="矩形_234-2" data-name="矩形 234" d="M0,0H126a4,4,0,0,1,4,4V22a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(9 9)" fill="#fff" />
+      </g>
+      <g transform="matrix(1, 0, 0, 1, 1468, 507)" filter="url(#矩形_235)">
+        <path id="矩形_235-2" data-name="矩形 235" d="M4,0H42a0,0,0,0,1,0,0V26a0,0,0,0,1,0,0H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0Z" transform="translate(9 9)" fill="#2b2b2b" />
+        <text xmlns="http://www.w3.org/2000/svg" fill="#000"
+        // svg文字的长度根据文字长短来决定，fork的额外减少1.5的系数；如果上千，额外减少0.5的系数
+          textLength={80 - 10 * (7.5 - (text.indexOf("Fork") > -1 ? (text.length - 1.5) : text.length) + (text.includes('k ') && 0.5))}
+          x={64 + 6 * (7.5 - (text.indexOf("Fork") > -1 ? (text.length - 1.5) : text.length) + (text.includes('k ') && 0.5))}
+          y="30" lengthAdjust="spacing" transform="scale(.9)" weight="bold">
+          {text}
+        </text>
+      </g>
+      <g id="图层_2" data-name="图层 2" transform="translate(1484 520)">
+        <g id="图层_1" data-name="图层 1">
+          <path id="路径_3357" data-name="路径 3357" d="M20.6,5.477l-.75-1.023-.658.329v8.211l.546.288v-.911l.862,1.395.7.109V3.9l-.7.27Zm-15.462,8.4,1.559-.78V4.676L5.139,3.9Zm10.7,1.063,1.4.836V1.559l-1.4.836ZM13.827,0H11.878V17.764h2.984V16.008H13.827ZM7.51,3.683l.771.285V15.756l1.41-.729V4.578l.755.271V3.258L7.51,1.559ZM0,13.271l3.39-1.717V8.32L1.78,8.155V9.292h.645v1.1l-1.109.5V7.4L3.4,7.779V6.451L0,5.329ZM25.1,9.257l2.5-3.928-1.864.2L24.5,7.177V6.086l-1.37.329V12.32l1.37.286V11.475l1.329,1.684,2.138.107Z" fillRule="evenodd" fill="url(#linear-gradient)" />
+        </g>
+      </g>
+    </g>
+  </svg>
+
+
+}
+
+export default Badge;