修改用户声明，修改用户头像显示方式，随意添加了一个默认头像。

mock/excel.ts

@@ -44,7 +44,7 @@ export default [
             {
               order_no: '@guid()',
               timestamp: +Mock.Random.date('T'),
-              username: '@name()',
+              userName: '@name()',
               price: '@float(1000, 15000, 0, 2)',
               'status|1': ['success', 'pending']
             }

src/layout/app-main/Navbar.vue

@@ -29,13 +29,17 @@
         <!--        <SizeSelect />-->
         <!--        <LangSelect />-->
         <el-dropdown trigger="click" size="medium">
-          <div class="avatar-wrapper">
-            <img src="https://github.jzfai.top/file/images/nav-right-logo.gif" class="user-avatar" />
+          <div class="avatar-wrapper" :title="(userInfo?.realName || userInfo?.userName) + ' - 在线'">
+            <img :src="userInfo.avatar ?? userImage" alt="用户头像" class="user-avatar" />
+            <div class="user-avatar-status" />
           </div>
           <template #dropdown>
-            <el-dropdown-menu>
+            <el-dropdown-menu class="drop-down">
+              <el-dropdown-item class="welcome-user">
+                {{ time }}好，<b>{{ userInfo.realName || userImage.userName || "平台用户" }}</b>
+              </el-dropdown-item>
               <router-link to="/">
-                <el-dropdown-item>{{ langTitle("Home") }}</el-dropdown-item>
+                <el-dropdown-item divided>{{ langTitle("Home") }}</el-dropdown-item>
               </router-link>
               <a target="_blank" href="https://github.com/jzfai/vue3-admin-plus">
                 <el-dropdown-item>{{ langTitle("Github") }}</el-dropdown-item>
@@ -66,9 +70,10 @@ import { resetState } from "@/hooks/use-permission";
 import { elMessage } from "@/hooks/use-element";
 import { useBasicStore } from "@/store/basic";
 import { langTitle } from "@/hooks/use-common";
+import userImage from "@/assets/layout/user.png";
 
 const basicStore = useBasicStore();
-const { settings, sidebar, setToggleSideBar, navbar } = basicStore;
+const { settings, sidebar, setToggleSideBar, navbar, userInfo } = basicStore;
 
 const toggleSideBar = () => {
   setToggleSideBar();
@@ -82,6 +87,18 @@ const loginOut = () => {
     resetState();
   });
 };
+
+const time = computed(() => {
+  const hover = new Date().getHours();
+  if (hover > 20) return "晚上";
+  if (hover > 17) return "傍晚";
+  if (hover > 13) return "下午";
+  if (hover > 11) return "中午";
+  if (hover > 8) return "上午";
+  if (hover > 5) return "早上";
+  return "凌晨";
+});
+
 </script>
 
 <style lang="scss" scoped>
@@ -94,6 +111,7 @@ const loginOut = () => {
   display: flex;
   align-items: center;
   overflow-x: auto;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -106,23 +124,28 @@ const loginOut = () => {
   .navbar-left {
     display: flex;
     align-items: center;
+
     > * {
       margin-right: 1em;
     }
   }
+
   .navbar-center {
     flex: 1 1;
     display: flex;
     align-items: center;
     justify-content: center;
+
     > * {
       margin: 0.5em;
     }
   }
+
   .navbar-right {
     display: flex;
     align-items: center;
     justify-content: flex-end;
+
     > * {
       margin-left: 1em;
     }
@@ -158,6 +181,17 @@ const loginOut = () => {
         border-radius: 10px;
       }
 
+      .user-avatar-status {
+        position: absolute;
+        right: -2px;
+        bottom: 0;
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        background-color: #55e802;
+        box-shadow: 0 0 3px black;
+      }
+
       .el-icon-caret-bottom {
         cursor: pointer;
         position: absolute;
@@ -169,4 +203,6 @@ const loginOut = () => {
   }
 }
 
+.drop-down {
+}
 </style>

src/store/basic.ts

@@ -4,12 +4,20 @@ import { defineStore } from 'pinia'
 import type { RouterTypes } from '~/basic'
 import defaultSettings from '@/settings'
 import router, { constantRoutes } from '@/router'
+
 export const useBasicStore = defineStore('basic', {
   state: () => {
     return {
       token: '',
       getUserInfo: false,
-      userInfo: { username: '', avatar: '' }, //user info
+      userInfo: {
+        userName: '',
+        realName: '',
+        avatar: '',
+        phone: '',
+        id: '',
+        isUse: true
+      }, //user info
       //router
       allRoutes: [] as RouterTypes,
       buttonCodes: [],
@@ -46,13 +54,11 @@ export const useBasicStore = defineStore('basic', {
       })
     },
     setUserInfo({ userInfo, roles, codes }) {
-      const { username, avatar } = userInfo
       this.$patch((state) => {
         state.roles = roles
         state.codes = codes
         state.getUserInfo = true
-        state.userInfo.username = username
-        state.userInfo.avatar = avatar
+        state.userInfo = userInfo
       })
     },
     resetState() {
@@ -65,8 +71,14 @@ export const useBasicStore = defineStore('basic', {
         state.buttonCodes = []
         state.filterAsyncRoutes = []
         //reset userInfo
-        state.userInfo.username = ''
-        state.userInfo.avatar = ''
+        state.userInfo = {
+          userName: '',
+          realName: '',
+          avatar: '',
+          phone: '',
+          id: '',
+          isUse: true
+        }
       })
       this.getUserInfo = false
     },

src/views/login/index.vue

@@ -11,7 +11,7 @@
         <span class="svg-container">
           <ElSvgIcon name="User" :size="14" />
         </span>
-        <el-input v-model="subForm.username" placeholder="用户名" />
+        <el-input v-model="subForm.userName" placeholder="用户名" />
         <!--占位-->
       </el-form-item>
       <el-form-item prop="password" :rules="formRules.isNotNull('密码')">
@@ -53,7 +53,7 @@ const { settings } = useBasicStore();
 const formRules = useElement().formRules;
 //form
 const subForm = reactive({
-  username: "",
+  userName: "",
   password: ""
 });
 const state: any = reactive({

ts-out-dir/src/store/basic.js

@@ -8,7 +8,7 @@ export const useBasicStore = defineStore('basic', {
       token: '',
       getUserInfo: false,
       userInfo: {
-        username: '',
+        userName: '',
         avatar: ''
       },
       allRoutes: [],