项目页增加返回按钮，更换退出登录按钮

src/assets/icons/logout.svg

@@ -0,0 +1 @@
+<svg t="1656996011379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2265" width="512" height="512"><path d="M725.333333 736 725.333333 597.333333 426.666667 597.333333 426.666667 426.666667 725.333333 426.666667 725.333333 288 949.333333 512 725.333333 736M554.666667 85.333333C601.6 85.333333 640 123.733333 640 170.666667L640 341.333333 554.666667 341.333333 554.666667 170.666667 170.666667 170.666667 170.666667 853.333333 554.666667 853.333333 554.666667 682.666667 640 682.666667 640 853.333333C640 900.266667 601.6 938.666667 554.666667 938.666667L170.666667 938.666667C123.733333 938.666667 85.333333 900.266667 85.333333 853.333333L85.333333 170.666667C85.333333 123.733333 123.733333 85.333333 170.666667 85.333333L554.666667 85.333333Z" p-id="2266" fill="currentColor"></path></svg>

src/components/LogoutButton.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-tooltip
+      effect="dark"
+      content="退出登录"
+      placement="bottom"
+  >
+    <div @click="logout" class="div-quitButton">
+      <svg-icon style="width: 24px;height: 24px;" icon-class="logout" class-name="icon-quit"></svg-icon>
+    </div>
+  </el-tooltip>
+</template>
+
+<script>
+import {ElMessage} from "element-plus";
+import router from "../router";
+import request from "../utils/request";
+
+export default {
+  name: "LogoutButton",
+  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/Home.vue

@@ -23,9 +23,7 @@
       <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">
+          <logout-button></logout-button>
-            <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;
@@ -54,6 +52,7 @@
 </template>
 
 <script setup>
+import LogoutButton from "../components/LogoutButton";
 </script>
 <script>
 // @ is an alias to /src
@@ -74,30 +73,7 @@ export default {
   mounted() {
 
   },
-  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>
@@ -109,24 +85,6 @@ export default {
   max-width: 100%;
 }
 
-.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/Project.vue

@@ -11,8 +11,11 @@
           <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-button style="width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: flex-start"
+                   text :icon="ArrowLeft" @click="this.router.push({path: '/'})">返回</el-button>
+
         <el-menu-item index="1" :route="'/project/'+$route.params.projectId">
-          <span>项目概览</span>
+          <span>概览</span>
         </el-menu-item>
         <el-menu-item index="2" :route="'/project/'+$route.params.projectId+'/workitem'">
           <span>工作项</span>
@@ -29,9 +32,8 @@
       <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">
+          <logout-button></logout-button>
-            <svg-icon style="width: 17px;height: 19px;" icon-class="quit" class-name="icon-quit"></svg-icon>
+          <span style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">{{project.projectName}}</span>
-          </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;
@@ -44,7 +46,7 @@
                 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
+                  staffJob
                 }}</span>
 
             </div>
@@ -57,12 +59,12 @@
     </el-container>
   </el-container>
 </template>
-
+<script setup>
+import {ArrowLeft} from '@element-plus/icons'
+import LogoutButton from "../components/LogoutButton";
+</script>
 <script>
 import request from "@/utils/request";
-import moment from "moment";
-import axios from "axios";
-import baseUrl from "@/utils/baseUrl";
 import router from "@/router";
 import {ElMessage} from "element-plus";
 
@@ -70,32 +72,30 @@ export default {
   name: "Project",
   data() {
     return {
-
+      project: {
+        projectName: ''
+      },
+      staffJob: '项目经理',
     }
   },
 
-  mounted() {
+  created() {
-
+    this.getProjectInfo();
   },
   methods: {
-    logout() {
+    getProjectInfo() {
+      const that = this
       request({
-        url: 'staff/logout',
+        url: 'project/'+this.$route.params.projectId,
-        method: 'post',
+        method: 'get'
+
       }).then(response => {
-
+        if (response.data.code === 200) {
-        this.$store.commit('clearStaff')
+          that.project = response.data.data
-
+        }
-        ElMessage({
-          message: '已登出',
-          type: 'success',
-        })
-
-        router.push({path: '/login'})
       }).catch(function (error) {
         console.log(error)
       })
-
     },
   }
 }
@@ -103,24 +103,4 @@ export default {
 
 <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>