对齐后台管理头部用户信息展示与用户端一致，并实现登录/退出

src/layout/AdminLayout.vue

@@ -3,16 +3,17 @@ import {useLoginUserStore} from "../store";
 import {computed, type ComputedRef, ref} from "vue";
 import type {RouteRecordRaw} from "vue-router";
 import router, {adminRoutes} from "../router";
-import {Expand, Fold} from "@element-plus/icons-vue";
+import {Expand, Fold, UserFilled} from "@element-plus/icons-vue";
 
 const title = ref<string>("分布式OJ系统");
 const loginUserStore = useLoginUserStore()
 const login = computed(()=>loginUserStore.loginUser.isLogin)
 const loginHandler = () => {
-
+  router.push('/login')
 }
 const logoutHandler = () => {
-
+  loginUserStore.logoutUser()
+  router.push('/problems')
 }
 const menus:ComputedRef<RouteRecordRaw[] | undefined> = computed(()=>{
   const role = loginUserStore.loginUser.user?.role
@@ -36,18 +37,21 @@ const isCollapse = ref(false)
       <div class="header-right">
         <template v-if="login">
           <el-dropdown placement="bottom">
-            <el-button> {{ loginUserStore.loginUser?.user?.name }} </el-button>
+            <el-button class="user-btn" text>
+              <el-icon class="user-avatar"><UserFilled /></el-icon>
+              <span class="username">{{ loginUserStore.loginUser?.user?.name }}</span>
+            </el-button>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item>个人信息</el-dropdown-item>
-                <el-dropdown-item @click="logoutHandler">退出</el-dropdown-item>
+                <el-dropdown-item divided @click="logoutHandler">退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
         </template>
         <template v-else>
           <el-button type="primary" size="small" @click="loginHandler">登录</el-button>
-          <el-button size="small">注册</el-button>
+          <el-button size="small" @click="loginHandler">注册</el-button>
         </template>
       </div>
     </el-header>
@@ -112,6 +116,27 @@ const isCollapse = ref(false)
   align-items: center;
   gap: 10px;
 }
+.username {
+  font-size: 14px;
+  color: #606266;
+}
+
+.user-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.user-btn:hover {
+  color: #db2777;
+}
+
+.user-avatar {
+  font-size: 20px;
+  color: #be185d;
+}
 
 .menu{
   transition: width 0.3s;