完善导航栏

src/components/Navbar.vue

@@ -1,35 +1,139 @@
 <template>
+  <div class="wrapper">
+    <!-- 页面头部部分 -->
+    <div class="header">
+      <div class="logo">SNCTF</div>
+      <!-- 水平一级菜单 -->
+      <div style="float:left;">
+        <el-menu
+            router
+            :default-active="$route.path"
+            class="el-menu-demo"
+            mode="horizontal"
+            background-color="#2d3039"
+            text-color="#fff"
+            active-text-color="#ffd04b">
+          <el-menu-item index="/home">Home</el-menu-item>
+          <el-menu-item index="/scoreboard">Scoreboard</el-menu-item>
+          <el-menu-item index="/users">Users</el-menu-item>
+          <el-menu-item index="/notification">Notification</el-menu-item>
+          <el-menu-item index="/challenges">Challenges</el-menu-item>
+        </el-menu>
+      </div>
+      <div class="header-right">
+        <div v-if="username!=''" class='right'>
+          <div class="userinfo">
+            <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+                    <span class="el-dropdown-link" style="font-size: larger">
+                      {{ username }}
+                        <i class="el-icon-caret-bottom"></i>
+                    </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item >个人信息</el-dropdown-item>
+                  <el-dropdown-item disabled>修改密码</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
 
-  <el-menu
+            </el-dropdown>
-      router
+          </div>
-      :default-active="$route.path"
-      class="el-menu-demo"
-      mode="horizontal"
-      background-color="#2d3039"
-      text-color="#fff"
-      active-text-color="#ffd04b"
 
-  >
+          <div class="slip">
+            <p class="slip">|</p>
+          </div>
+          <div class="logout">
+            <el-button text color="#626aef" :dark="isDark" @click="logout">退出登录</el-button>
+          </div>
+        </div>
+        <div v-else class="login">
+          <el-button type="primary" class="login" @click="login">登录/注册</el-button>
+        </div>
 
-    <el-menu-item index="0">
+      </div>
-      <a href="/home"><img style = "height:50px;width:auto" src="../assets/logo.png" alt="logo"></a>
+    </div>
-    </el-menu-item>
+  </div>
+  <!--  <el-menu-->
+  <!--      router-->
+  <!--      :default-active="$route.path"-->
+  <!--      class="el-menu-demo"-->
+  <!--      mode="horizontal"-->
+  <!--      background-color="#2d3039"-->
+  <!--      text-color="#fff"-->
+  <!--      active-text-color="#ffd04b"-->
 
-    <el-menu-item index="/home">Home</el-menu-item>
+  <!--  >-->
-    <el-menu-item index="/scoreboard">Scoreboard</el-menu-item>
+  <!--    <el-menu-item index="0">-->
-    <el-menu-item index="/users">Users</el-menu-item>
+  <!--      <a href="/home"><img style = "height:50px;width:auto" src="../assets/logo.png" alt="logo"></a>-->
-    <el-menu-item index="/notification">Notification</el-menu-item>
+  <!--    </el-menu-item>-->
-    <el-menu-item index="/challenges">Challenges</el-menu-item>
 
-    <el-button  type="primary" class="login" @click="login">登录/注册</el-button>
+  <!--    <el-menu-item index="/home">Home</el-menu-item>-->
+  <!--    <el-menu-item index="/scoreboard">Scoreboard</el-menu-item>-->
+  <!--    <el-menu-item index="/users">Users</el-menu-item>-->
+  <!--    <el-menu-item index="/notification">Notification</el-menu-item>-->
+  <!--    <el-menu-item index="/challenges">Challenges</el-menu-item>-->
 
 
-  </el-menu>
+  <!--    <div v-if="username!=''" class="right">-->
+  <!--      <el-sub-menu index="/profile" class="profile" >-->
+  <!--        <template #title>{{ username }}</template>-->
+  <!--        <el-menu-item index="/edit">修改资料</el-menu-item>-->
+  <!--      </el-sub-menu>-->
+  <!--      <p>|</p>-->
+  <!--      <el-menu-item @click="logout()">Challenges</el-menu-item>-->
+  <!--    </div>-->
+
+  <!--    <el-button v-else type="primary" class="login" @click="login">登录/注册</el-button>-->
+
+
+
+  <!--  </el-menu>-->
+
 </template>
 
 <script>
+import Login from "../components/Login.vue";
+import axios from "axios";
+import {ElNotification} from "element-plus";
+
 export default {
+  data(){
+    return{
+      username : '',
+    }
+  },
+
+  mounted(){
+    axios.get("/api/v1/user/session").then(res => {
+      if (res.data.code === 200) {
+        console.log(res)
+        this.username = res.data.data.username;
+
+      }
+    })
+  },
+
+
   methods:{
+    logout(){
+      axios.get("/api/v1/logout").then(res => {
+        if (res.data.code === 200) {
+          ElNotification({
+            title: '退出成功',
+            message: '已成功退出',
+            type: 'success',
+            duration: 3000,
+          });
+          if(this.$route.path === '/') {
+            window.location.reload()
+          } else {
+            this.$router.push('/login')
+        }
+        }
+      })
+    },
+
+
+
     login(){
       this.$router.push('/login')
     }
@@ -40,11 +144,85 @@ export default {
 
 <style lang="less" scoped>
 
-.login{
+
-  margin-top: 12px;
+.wrapper {
-  margin-left: auto;
+  width: 100%;
-  margin-right: 30px;
+  height: 100%;
-  float:right;
+  background: #2d3039;
+}
+.header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 70px;
+  font-size: 22px;
+}
+.header .logo {
+  float: left;
+  margin-left: 60px;
+  margin-top: 17.5px;
+  height: 29px;
+  width: 120px;
+  vertical-align: middle;
+  color: #dddddd;
+}
+.header-right {
+  float: right;
+  padding-right: 50px;
+  height: 70px;
+  .right {
+    display: flex;
+    align-items: center;
+    transform:translateY(-10%);
+    .userinfo{
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+
+      .user-name{
+        margin-right: 10px;
+        color: #dddddd;
+      }
+    }
+    .slip{
+      display: flex;
+      align-items: center;
+    }
+    .logout{
+      display: flex;
+      align-items: center;
+      margin-left: 20px;
+    }
+
+  }
+  .login{
+    transform:translateY(20%);
+    display: flex;
+    align-items: center;
+  }
+}
+.el-dropdown-link {
+  cursor: pointer;
+}
+.el-dropdown-menu__item {
+  text-align: center;
+}
+
+
+.el-menu.el-menu--horizontal {
+  border-bottom: none !important;
+  float: left;
+  margin-left: 50px;
+}
+.el-menu--horizontal > .el-menu-item.is-active {
+  border-bottom: 2px solid #ffd04b;
+  color: #ffd04b;
+  font-weight: 700;
+}
+.el-menu--horizontal > .el-menu-item {
+  font-size: 16px;
+  margin: 0 15px;
+  color: white;
 }
 
 

src/router/index.js

@@ -5,6 +5,10 @@ const routerHistory = createWebHistory()
 const router = createRouter({
     history: routerHistory,
     routes: [
+        {
+            path: '/',
+            redirect:'/home'
+        },
         {
             path: '/home',
             name:'Home',