完善顶部内容

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

@@ -1,24 +1,26 @@
 <script setup>
 import {get, logout} from '@/net'
 import router from "@/router";
-import {ref} from "vue";
+import {reactive, ref} from "vue";
 import {
+  Back,
   Bell,
   ChatDotSquare, Collection, DataLine, Document, Files,
-  Location, Lock,
+  Location, Lock, Message,
   Monitor,
   Notification, Operation,
   Position,
-  School,
-  Umbrella, User
+  School, Umbrella, User
 } from "@element-plus/icons-vue";
 import {useStore} from "@/store";
 
 const store = useStore();
-
 const loading = ref(true)
-
 const isCollapse = ref(false)
+const search = reactive({
+  text: '',
+  type: '1'
+})
 
 get('/api/user/info', (data) => {
   store.user = data
@@ -35,12 +37,45 @@ function userLogout() {
     <el-container style="height: 100%" v-if="!loading">
       <el-header class="main-content-header">
         <el-image class="logo" src="https://element-plus.org/images/element-plus-logo.svg"/>
-        <div style="flex: 1" class="user-info">
+        <div style="flex: 1;text-align: center;margin: 0 20px">
+          <el-input v-model="search.text" style="width: 100%;max-width: 500px">
+            <template #prepend>
+              <el-icon><Search/></el-icon>
+            </template>
+            <template #append>
+              <el-select v-model="search.type" style="width: 120px">
+                <el-option value="1" label="帖子广场"/>
+                <el-option value="2" label="校园活动"/>
+                <el-option value="3" label="表白墙"/>
+                <el-option value="4" label="教务通知"/>
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+        <div class="user-info">
           <div class="profile">
             <div>{{store.user.username}}</div>
             <div>{{store.user.email}}</div>
           </div>
-          <el-avatar :size="38" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
+          <el-dropdown>
+            <el-avatar :size="38" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <el-icon><Operation /></el-icon>
+                  个人设置
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <el-icon><Message/></el-icon>
+                  消息列表
+                </el-dropdown-item>
+                <el-dropdown-item @click="userLogout" divided>
+                  <el-icon><Back/></el-icon>
+                  退出登录
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </el-header>
       <el-container>
@@ -175,6 +210,10 @@ function userLogout() {
     justify-content: flex-end;
     align-items: center;
 
+    .el-avatar:hover {
+      cursor: pointer;
+    }
+
     .profile {
       text-align: right;
       margin-right: 20px;