完善头像框和导航栏

study-project-frontend/src/views/IndexView.vue

@@ -7,36 +7,27 @@
                     style="width: 150px"/>
         </div>
         <el-menu
-            default-active="2"
+            default-active="1"
             style="border: none">
-          <el-sub-menu index="1">
+          <el-menu-item index="1">
-            <template #title>
-              <el-icon><location /></el-icon>
-              <span>Navigator One</span>
-            </template>
-            <el-menu-item-group title="Group One">
-              <el-menu-item index="1-1">item one</el-menu-item>
-              <el-menu-item index="1-2">item two</el-menu-item>
-            </el-menu-item-group>
-            <el-menu-item-group title="Group Two">
-              <el-menu-item index="1-3">item three</el-menu-item>
-            </el-menu-item-group>
-            <el-sub-menu index="1-4">
-              <template #title>item four</template>
-              <el-menu-item index="1-4-1">item one</el-menu-item>
-            </el-sub-menu>
-          </el-sub-menu>
-          <el-menu-item index="2">
             <el-icon><icon-menu /></el-icon>
-            <span>Navigator Two</span>
+            <span>帖子列表</span>
           </el-menu-item>
-          <el-menu-item index="3" disabled>
+          <el-menu-item index="2">
             <el-icon><document /></el-icon>
-            <span>Navigator Three</span>
+            <span>校园表白墙</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <el-icon><setting /></el-icon>
+            <span>帖子管理</span>
           </el-menu-item>
           <el-menu-item index="4">
             <el-icon><setting /></el-icon>
-            <span>Navigator Four</span>
+            <span>我的收藏</span>
+          </el-menu-item>
+          <el-menu-item index="5">
+            <el-icon><setting /></el-icon>
+            <span>个人设置</span>
           </el-menu-item>
         </el-menu>
       </el-aside>
@@ -54,19 +45,22 @@
             </div>
             <div style="display: flex">
               <div style="text-align: right;margin: 10px 10px 0 0;line-height: 15px">
-                <div style="font-weight: bold">{{store.auth.user.username}}</div>
+                <div style="font-weight: bold">{{store.auth.user?.username}}</div>
-                <div style="font-size: 13px">{{store.auth.user.email}}</div>
+                <div style="font-size: 13px">{{store.auth.user?.email}}</div>
               </div>
               <el-dropdown trigger="click">
                 <el-avatar class="avatar"
                            :size="45" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                 <template #dropdown>
                   <el-dropdown-menu>
-                    <el-dropdown-item>Action 1</el-dropdown-item>
+                    <el-dropdown-item>
-                    <el-dropdown-item>Action 2</el-dropdown-item>
+                      <el-icon><setting /></el-icon>
-                    <el-dropdown-item>Action 3</el-dropdown-item>
+                      个人设置
-                    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+                    </el-dropdown-item>
-                    <el-dropdown-item divided>Action 5</el-dropdown-item>
+                    <el-dropdown-item @click="logout" style="color: #c43a3a" divided>
+                      <el-icon><Back /></el-icon>
+                      退出登录
+                    </el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
@@ -84,15 +78,15 @@ import {get} from "@/net";
 import {ElMessage} from "element-plus";
 import router from "@/router";
 import {useStore} from "@/stores";
-import {Document, Location, Setting, Menu as IconMenu, Search} from "@element-plus/icons-vue";
+import {Document, Location, Setting, Menu as IconMenu, Search, Back} from "@element-plus/icons-vue";
 
 const store = useStore()
 
 const logout = () => {
     get('/api/auth/logout', (message) => {
         ElMessage.success(message)
-        store.auth.user = null
         router.push('/')
+        store.auth.user = null
     })
 }
 </script>