头部增加消息及个人信息

auto-imports.d.ts

@@ -1,5 +1,5 @@
 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
+
 }

components.d.ts

@@ -8,13 +8,19 @@ declare module '@vue/runtime-core' {
     AppLink: typeof import('./src/components/AppLink/index.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCascader: typeof import('element-plus/es')['ElCascader']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -30,6 +36,8 @@ declare module '@vue/runtime-core' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTransfer: typeof import('element-plus/es')['ElTransfer']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileLink: typeof import('./src/components/FileLink/index.vue')['default']
     FileUpload: typeof import('./src/components/FileUpload/index.vue')['default']

src/layout/app/components/AppHeader/index.vue

@@ -1,10 +1,94 @@
-<script setup lang="ts">
+<script setup>
 import {ref} from 'vue';
+import { user} from '~/store/user';
 const APP_TITLE = ref(document.title)
+function handleCommand(command) {
+  switch (command) {
+    case 'loginOut':
+      if (localStorage.getItem('userInfo')) {
+        localStorage.removeItem('userInfo');
+        window.open(window.GLOBAL_CONFIG.origin, '_self');
+        // loginShow = true;
+      }
+      break;
+    case 'home':
+      window.open(window.GLOBAL_CONFIG.origin, '_self');
+  }
+}
 </script>
 
 <template>
-  <div class="header w-full h-50px leading-50px line px-8 text-xl text-white tracking-wider">{{ APP_TITLE }}</div>
+  <div class="header w-full h-50px leading-50px line px-8 text-xl text-white tracking-wider">
+    <div>{{ APP_TITLE }}</div>
+    <div>
+      <span class="icon-message"></span>
+      <el-dropdown @command="handleCommand">
+        <div>
+          <div class="shot pr hand">
+            <img :src="user.user_avatar" alt="" :key="user?.user_avatar">
+            <span class="dot"></span>
+          </div>
+          <h3 class="shot-name">{{user.user_realname}}</h3>
+        </div>
+
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="home">首页</el-dropdown-item>
+            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
+    </div>
+  </div>
 </template>
+<style lang="scss">
+  .header{
+    display: flex;
+    justify-content: space-between;
+    .icon-message {
+      margin-right: 20px;
+      display: inline-block;
+      vertical-align: middle;
+      width: 16px;
+      height: 20px;
+      background: url("/images/header/icon-message.png") center no-repeat;
+    }
+  }
+  .shot {
+    margin-top: 1px;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #fff;
+
+    img {
+      width: 100%;
+      border-radius: 50%;
+    }
 
+    .dot {
+      position: absolute;
+      right: 1px;
+      bottom: 1px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: #3EBB92;
+      border: 2px solid #F1FEF6;
+    }
+  }
+  .shot-name{
+    margin-left: 10px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #fff;
+    line-height: 50px;
+  }
+</style>