refactor: 调整分离部分代码，添加项目功能页

src/App.vue

@@ -7,33 +7,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { useStore } from 'vuex';
+import {
+  defineComponent,
+} from 'vue';
 import Menu from '@/components/Menu.vue';
 
+import { useProject } from '@/composable/useProject';
+
 export default defineComponent({
   components: { Menu },
   setup() {
-    const store = useStore();
+    const { projectList, selectedProject, handleProjectChange } = useProject();
     return {
-      projectList: computed(() => store.state.projectList),
+      projectList,
+      selectedProject,
+      handleProjectChange,
     };
   },
-  data() {
-    return {
-      selectedProject: {},
-    };
-  },
-  methods: {
-    handleProjectChange(id: number) {
-      this.projectList.forEach((item: any) => {
-        if (item.id === id) {
-          this.selectedProject = item;
-          this.$router.push(`/project/${id}`);
-        }
-      });
-    },
-  },
 });
 </script>
 

src/components/Header.vue

@@ -1,31 +0,0 @@
-<template>
-  <header>
-    <h1 class="nav-logo">LOGO</h1>
-    <ul>
-      <li class="nav-notification">
-        <router-link to="/notification">notification</router-link>
-      </li>
-      <li class="nav-user">avatar</li>
-    </ul>
-  </header>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-
-});
-</script>
-
-<style lang="scss" scoped>
-header {
-  & > ul {
-    list-style: none;
-    float:right;
-    & > li {
-      display: inline-block;
-    }
-}
-}
-</style>

src/components/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-container">
+  <div id="menu" class="menu-container">
     <div class="menu-logo">
       LOGO
     </div>
@@ -17,6 +17,7 @@
       </transition>
     </div>
     <div class="notify"></div>
+    <div class="user"></div>
   </div>
 </template>
 

src/components/ProjectCard.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   },
   methods: {
     goToProject(id: number) {
-      this.$router.push(`/project/${id}`);
+      this.$router.push(`/project/${id}/schedule`);
     },
   },
 });

src/components/SideBar.vue

@@ -3,7 +3,9 @@
       <div :class="{icon:true,selected:selectedIndex === 0}" target="schedule"></div>
       <div :class="{icon:true,selected:selectedIndex === 1}" target="taskList"></div>
       <div :class="{icon:true,selected:selectedIndex === 2}" target="bugList"></div>
-      <div :class="{icon:true,selected:selectedIndex === 3}" target="statistic"></div>
+      <div :class="{icon:true,selected:selectedIndex === 3}" target="statistics"></div>
+      <div :class="{icon:true,selected:selectedIndex === 4}" target="pipeline"></div>
+      <div :class="{icon:true,selected:selectedIndex === 5}" target="apitest"></div>
   </div>
 </template>
 
@@ -21,23 +23,27 @@ export default {
       switch (value) {
         case 'schedule':
           this.selectedIndex = 0;
-          this.$emit('change', 0);
           break;
         case 'taskList':
           this.selectedIndex = 1;
-          this.$emit('change', 1);
           break;
         case 'bugList':
           this.selectedIndex = 2;
-          this.$emit('change', 2);
           break;
-        case 'statistic':
+        case 'statistics':
           this.selectedIndex = 3;
-          this.$emit('change', 3);
           break;
-        default:
+        case 'pipeline':
+          this.selectedIndex = 4;
+          break;
+        case 'apitest':
+          this.selectedIndex = 5;
           break;
+        default:
+          throw new TypeError('Unknown Tab Value!');
       }
+
+      this.$emit('change', value);
     },
   },
 };
@@ -99,13 +105,31 @@ export default {
 .icon[target=bugList].selected{
   background-image: url("../assets/icon/bug-using.svg");
 }
-.icon[target=statistic]{
+.icon[target=statistics]{
+  background-image: url("../assets/icon/training.svg");
+}
+.icon[target=statistics]:hover{
+  background-image: url("../assets/icon/training-hover.svg");
+}
+.icon[target=statistics].selected{
+  background-image: url("../assets/icon/training-using.svg");
+}
+.icon[target=pipeline]{
+  background-image: url("../assets/icon/training.svg");
+}
+.icon[target=pipeline]:hover{
+  background-image: url("../assets/icon/training-hover.svg");
+}
+.icon[target=pipeline].selected{
+  background-image: url("../assets/icon/training-using.svg");
+}
+.icon[target=apitest]{
   background-image: url("../assets/icon/training.svg");
 }
-.icon[target=statistic]:hover{
+.icon[target=apitest]:hover{
   background-image: url("../assets/icon/training-hover.svg");
 }
-.icon[target=statistic].selected{
+.icon[target=apitest].selected{
   background-image: url("../assets/icon/training-using.svg");
 }
 </style>

src/composable/useProject.ts

@@ -0,0 +1,25 @@
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+export const useProject = () => {
+  const store = useStore();
+  const router = useRouter();
+
+  const projectList = computed(() => store.state.projectList);
+  let selectedProject = reactive({});
+
+  const handleProjectChange = (id: number) => {
+    projectList.value.forEach((item: Project) => {
+      if (item.id === id) {
+        selectedProject = item;
+        router.push(`/project/${id}/schedule`);
+      }
+    });
+  };
+  return {
+    projectList,
+    selectedProject,
+    handleProjectChange,
+  };
+};

src/router/index.ts

@@ -50,6 +50,14 @@ const routes: Array<RouteRecordRaw> = [
         path: 'statistics',
         component: import(/* webpackChunkName: "project" */'@/views/Project/Statistics.vue'),
       },
+      {
+        path: 'pipeline',
+        component: import(/* webpackChunkName: "project" */'@/views/Project/Pipeline.vue'),
+      },
+      {
+        path: 'apitest',
+        component: import(/* webpackChunkName: "project" */'@/views/Project/APITest.vue'),
+      },
     ],
   }),
 ];
@@ -91,9 +99,9 @@ router.beforeEach((to, from, next) => {
 
 router.afterEach((to, from) => {
   if (to.matched.some((record) => record.meta.hideNavigator)) {
-    document.getElementById('nav')!.style.display = 'none';
+    document.getElementById('menu')!.style.display = 'none';
   } else {
-    document.getElementById('nav')!.style.display = 'block';
+    document.getElementById('menu')!.style.display = 'flex';
   }
 });
 

src/typings/project.d.ts

@@ -1,4 +1,5 @@
 declare interface Project {
-  projectId: number;
+  id: number;
   name: string;
+  description: string;
 }

src/views/Home.vue

@@ -29,11 +29,6 @@ export default defineComponent({
       projectList: computed(() => store.state.projectList),
     };
   },
-  data() {
-    return {
-      selectedProject: {},
-    };
-  },
 });
 </script>
 <style scoped>

src/views/Project/APITest.vue

@@ -0,0 +1,13 @@
+<template>
+  project-api-test
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style>
+
+</style>

src/views/Project/Pipeline.vue

@@ -0,0 +1,13 @@
+<template>
+  project-pipeline
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style>
+
+</style>

src/views/ProjectContainer.vue

@@ -14,8 +14,8 @@ export default {
   name: 'ProjectContainer',
   components: { SideBar },
   methods: {
-    handleTabChange(index) {
-      console.log(index);
+    handleTabChange(value) {
+      this.$router.push(value);
     },
   },
 };