feat: 代码评审的简单框架

src/assets/icon_new/codereview-hover.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639038288217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3628" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M704 739.84V338.752a64 64 0 0 0-64-64H576v50.752a32 32 0 0 1-54.656 22.592L406.656 233.344a32 32 0 0 1 0-45.248l114.688-114.752A32 32 0 0 1 576 96v50.752h64a192 192 0 0 1 192 192v401.088a128 128 0 1 1-128 0zM192 321.6a128 128 0 1 1 128 0v418.24a128 128 0 1 1-128 0V321.6z m64-46.848a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 640a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m512 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" p-id="3629" fill="#2c2c2c"></path></svg>

src/assets/icon_new/codereview-using.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639038288217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3628" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M704 739.84V338.752a64 64 0 0 0-64-64H576v50.752a32 32 0 0 1-54.656 22.592L406.656 233.344a32 32 0 0 1 0-45.248l114.688-114.752A32 32 0 0 1 576 96v50.752h64a192 192 0 0 1 192 192v401.088a128 128 0 1 1-128 0zM192 321.6a128 128 0 1 1 128 0v418.24a128 128 0 1 1-128 0V321.6z m64-46.848a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 640a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m512 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" p-id="3629" fill="#1296db"></path></svg>

src/assets/icon_new/codereview.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639038288217" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3628" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M704 739.84V338.752a64 64 0 0 0-64-64H576v50.752a32 32 0 0 1-54.656 22.592L406.656 233.344a32 32 0 0 1 0-45.248l114.688-114.752A32 32 0 0 1 576 96v50.752h64a192 192 0 0 1 192 192v401.088a128 128 0 1 1-128 0zM192 321.6a128 128 0 1 1 128 0v418.24a128 128 0 1 1-128 0V321.6z m64-46.848a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 640a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m512 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" p-id="3629" fill="#8a8a8a"></path></svg>

src/components/SideBar.vue

@@ -31,6 +31,7 @@ const sidebar = [
   { name: 'apitest', description: '测试', hide: false },
   { name: 'invite', description: '项目关联', hide: false },
   { name: 'git', description: '提交记录', hide: false },
+  { name: 'codereview', description: '代码评审', hide: false },
 ];
 
 export default {
@@ -180,6 +181,17 @@ export default {
     color: #1296db;
   }
 }
+.icon[target=codereview]{
+  background-image: url("../assets/icon_new/codereview.svg");
+  .el-menu-item:hover & {
+    background-image: url("../assets/icon_new/codereview-hover.svg");
+    color: #2c2c2c;
+  }
+  .el-menu-item.is-active & {
+    background-image: url("../assets/icon_new/codereview-using.svg");
+    color: #1296db;
+  }
+}
 .title{
   font-size: 9px;
   margin-top: 12px;

src/router/index.ts

@@ -70,6 +70,10 @@ const routes: Array<RouteRecordRaw> = [
         path: 'git',
         component: () => import(/* webpackChunkName: "project" */'@/views/Project/Commit.vue'),
       },
+      {
+        path: 'codereview',
+        component: () => import(/* webpackChunkName: "project" */'@/views/Project/CodeReview.vue'),
+      },
     ],
   }),
 ];

src/views/Project/CodeReview.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="container">
+    <el-row>
+      <h2>代码评审列表</h2>
+    </el-row>
+    <div class = "tabs">
+      <div class="tab-pane" :active="tabActive[0]" @click="changeTab(0)">
+        Opened <div class="tab-pane-inline-circle">{{tabCount[0]}}</div>
+      </div>
+      <div class="tab-pane" :active="tabActive[1]" @click="changeTab(1)">
+        Merged <div class="tab-pane-inline-circle">{{tabCount[1]}}</div>
+      </div>
+      <div class="tab-pane" :active="tabActive[2]" @click="changeTab(2)">
+        Closed <div class="tab-pane-inline-circle">{{tabCount[2]}}</div>
+      </div>
+      <div class="tab-pane" :active="tabActive[3]" @click="changeTab(3)">
+        All <div class="tab-pane-inline-circle">{{tabCount[3]}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CodeReview.vue',
+  data() {
+    return {
+      tabActive: [true, false, false, false],
+      tabCount: [0, 0, 0, 0],
+    };
+  },
+  methods: {
+    changeTab(index) {
+      if (this.tabActive[index]) return null;
+      this.tabActive = [false, false, false, false];
+      this.tabActive[index] = true;
+      return null;
+    },
+  },
+  async mounted() { console.log('Null'); },
+};
+</script>
+
+<style scoped>
+.container {
+  margin: 20px 50px;
+}
+.tabs {
+  margin: 15px auto;
+  height: 52px;
+  border-style: solid;
+  border-color: #8a8a8a white;
+  border-width: 0.5px 0px;
+  /* overflow: hidden; */
+}
+.tab-pane {
+  display: inline-block;
+  width: 10%;
+  padding: 15px 5px;
+  text-align: center;
+  border-style: solid;
+  border-color: white;
+  border-width: 2px 0px;
+  height: 18px;
+  font-size: 15px;
+  color: #7a7a7a;
+  cursor: pointer;
+}
+.tab-pane:hover{
+  border-bottom-width: 2px;
+  border-bottom-color: #8a8a8a;
+  color: #000;
+}
+.tab-pane[active=true]{
+  border-bottom-color: #1296db;
+  border-bottom-width: 2px;
+  color: black;
+  font-weight: bold;
+}
+.tab-pane-inline-circle {
+  display: inline-block;
+  padding: 2px;
+  border-radius: 50%;
+  width: 15px;
+  background-color: #eeeeee;
+}
+</style>