修改了路由，添加了项目内页面

src/router/index.js

@@ -7,6 +7,10 @@ import Project from "@/views/Project.vue";
 
 import OngoingProject from "../views/OngoingProject";
 import ClosedProject from "../views/ClosedProject";
+import ProjectGroup from "../views/ProjectGroup";
+import ProjectInfo from "../views/ProjectInfo";
+import ProjectWorkitem from "../views/ProjectWorkitem";
+import ProjectDemand from "../views/ProjectDemand";
 const routes = [
   {
     path: '/',
@@ -18,11 +22,34 @@ const routes = [
         component: OngoingProject,
       },
       {
-        path: '/ClosedProject',
+        path: '/project/closed',
         component: ClosedProject,
       },
     ],
   },
+  {
+    path: '/project/:projectId(\\d+)',
+    name: 'Project',
+    component: Project,
+    children: [
+      {
+        path: '/project/:projectId(\\d+)',
+        component: ProjectInfo,
+      },
+      {
+        path: '/project/:projectId(\\d+)/workitem',
+        component: ProjectWorkitem,
+      },
+      {
+        path: '/project/:projectId(\\d+)/demand',
+        component: ProjectDemand,
+      },
+      {
+        path: '/project/:projectId(\\d+)/group',
+        component: ProjectGroup,
+      },
+    ],
+  },
   {
     path: '/login',
     name: 'Login',

src/views/Home.vue

@@ -14,7 +14,7 @@
         <el-menu-item index="1" route="/">
           <span>在途项目</span>
         </el-menu-item>
-        <el-menu-item index="2" route="/ClosedProject">
+        <el-menu-item index="2" route="/project/closed">
           <span>已结项项目</span>
         </el-menu-item>
       </el-menu>

src/views/OngoingProject.vue

@@ -12,6 +12,7 @@
       <el-table
           ref="tableRef"
           class="projectTable"
+          @row-click="onRowClick"
           :height="tableHeight"
           :data="tableData">
         <el-table-column prop="projectName" label="项目名称" min-width="15%"/>
@@ -28,9 +29,12 @@
         </el-table-column>
         <el-table-column min-width="10%" align="right">
           <template #default="scope">
+            <div style="height: 32px;">
               <el-button v-show="this.$store.state.staff===null? false:(this.$store.state.staff.staffId===scope.row.projectCreator)" type="primary" plain
                          @click="onCloseProject(scope.row)">结项
               </el-button>
+            </div>
+
           </template>
         </el-table-column>
       </el-table>
@@ -115,11 +119,12 @@ export default {
   mounted() {
   },
   methods: {
+    onRowClick(row, column, event) {
+      router.push({path: '/project/'+row.projectId})
+    },
     onCreateProject() {
       this.getProjectClass()
-
       this.dialogFormVisible = true
-
     },
     // 选择一页显示多少条数据
     handleSizeChange(val) {

src/views/Project.vue

@@ -1,7 +1,61 @@
 <template>
-  <div>
+  <el-container style="width: 100%;height: 100%">
+    <el-aside width="260px"
+              style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
+      <el-menu
+          router
+          style="height: 100%"
+          default-active="1">
+        <div
+            style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
+          <svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
+          <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
+        </div>
+        <el-menu-item index="1" :route="'/project/'+$route.params.projectId">
+          <span>项目概览</span>
+        </el-menu-item>
+        <el-menu-item index="2" :route="'/project/'+$route.params.projectId+'/workitem'">
+          <span>工作项</span>
+        </el-menu-item>
+        <el-menu-item index="3" :route="'/project/'+$route.params.projectId+'/demand'">
+          <span>需求</span>
+        </el-menu-item>
+        <el-menu-item index="4" :route="'/project/'+$route.params.projectId+'/group'">
+          <span>团队</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-container style="background-color: #F2F3F5">
+      <el-header height="100px">
+        <div style="height: 60px; margin: 30px 30px 30px 30px; background-color: white; border-radius: 10px;
+                  display: flex; flex-direction: row; align-items: center;justify-content: space-between">
+          <div @click="logout" class="div-quitButton">
+            <svg-icon style="width: 17px;height: 19px;" icon-class="quit" class-name="icon-quit"></svg-icon>
+          </div>
+          <div style="margin: 0 30px 0 30px; ;
+                  display: flex; flex-direction: row-reverse; align-items: center">
+            <div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
+                      display: flex; justify-content: center;align-items: center;">
+              <span style="color: white">{{ this.$store.state.staff===null? this.$store.state.staff:this.$store.state.staff.staffFullname[0] }}</span>
+            </div>
+            <div style="height: 100%; margin-right: 10px;
+                      display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
+            <span
+                style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">
+              {{ this.$store.state.staff===null? this.$store.state.staff: this.$store.state.staff.staffFullname }}</span>
+              <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
+                  this.$store.state.staff===null? this.$store.state.staff:this.$store.state.staff.staffUsername
+                }}</span>
 
             </div>
+          </div>
+        </div>
+      </el-header>
+      <el-main style="overflow: unset">
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
 <script>
@@ -24,11 +78,49 @@ export default {
 
   },
   methods: {
+    logout() {
+      request({
+        url: 'staff/logout',
+        method: 'post',
+      }).then(response => {
 
+        this.$store.commit('clearStaff')
+
+        ElMessage({
+          message: '已登出',
+          type: 'success',
+        })
+
+        router.push({path: '/login'})
+      }).catch(function (error) {
+        console.log(error)
+      })
+
+    },
   }
 }
 </script>
 
 <style scoped>
 
+.icon-quit {
+  color: #606266;
+}
+
+div.div-quitButton {
+  margin-left: 10px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div.div-quitButton:hover {
+  cursor: pointer;
+}
+
+div.div-quitButton:hover > .icon-quit {
+  color: #409EFF;
+}
 </style>

src/views/ProjectDemand.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>需求</div>
+</template>
+
+<script>
+export default {
+  name: "ProjectDemand"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ProjectGroup.vue

@@ -0,0 +1,13 @@
+<template>
+<div>项目团队</div>
+</template>
+
+<script>
+export default {
+  name: "ProjectGroup"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ProjectInfo.vue

@@ -0,0 +1,13 @@
+<template>
+<div>项目概览</div>
+</template>
+
+<script>
+export default {
+  name: "ProjectInfo"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ProjectWorkitem.vue

@@ -0,0 +1,13 @@
+<template>
+<div>工作项</div>
+</template>
+
+<script>
+export default {
+  name: "ProjectWorkitem"
+}
+</script>
+
+<style scoped>
+
+</style>