fix(avatar): show current user's avatar (#640)

在显示头像的地方正确显示当前登录用户的头像，已补充mock接口返回的avatar字段。

fix(avatar): show current user's avatar (#640)
在显示头像的地方正确显示当前登录用户的头像，已补充mock接口返回的avatar字段。
Netfan · GitHub
1 parent d8ff30d9
Showing 9 changed files with 60 additions and 23 deletions
mock/sys/user.ts
src/api/sys/model/userModel.ts
src/layouts/default/header/components/lock/LockModal.vue
src/layouts/default/header/components/user-dropdown/index.vue
src/views/dashboard/workbench/components/WorkbenchHeader.vue
src/views/demo/page/account/center/index.vue
src/views/demo/page/account/setting/BaseSetting.vue
src/views/sys/lock/LockPage.vue
types/store.ts
@@ -7,6 +7,7 @@ function createFakeUserList() {
       userId: '1',
       username: 'vben',
       realName: 'Vben Admin',
+      avatar: 'http://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
       desc: 'manager',
       password: '123456',
       token: 'fakeToken1',
@@ -22,6 +23,7 @@ function createFakeUserList() {
       username: 'test',
       password: '123456',
       realName: 'test user',
+      avatar: 'http://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
       desc: 'tester',
       token: 'fakeToken2',
       roles: [
@@ -38,6 +38,8 @@ export interface GetUserInfoByUserIdModel {
   username: string;
   // 真实名字
   realName: string;
+  // 头像
+  avatar: string;
   // 介绍
   desc?: string;
 }
@@ -8,7 +8,7 @@
   >
     <div :class="`${prefixCls}__entry`">
       <div :class="`${prefixCls}__header`">
-        <img :src="headerImg" :class="`${prefixCls}__header-img`" />
+        <img :src="avatar" :class="`${prefixCls}__header-img`" />
         <p :class="`${prefixCls}__header-name`">
           {{ getRealName }}
         </p>
@@ -71,6 +71,11 @@
         await resetFields();
       }
+      const avatar = computed(() => {
+        const { avatar } = userStore.getUserInfo;
+        return avatar || headerImg;
+      });
+
       return {
         t,
         prefixCls,
@@ -78,7 +83,7 @@
         register,
         registerForm,
         handleLock,
-        headerImg,
+        avatar,
       };
     },
   });
 <template>
   <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
     <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
-      <img :class="`${prefixCls}__header`" :src="headerImg" />
+      <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
       <span :class="`${prefixCls}__info hidden md:block`">
         <span :class="`${prefixCls}__name  `" class="truncate">
           {{ getUserInfo.realName }}
@@ -75,8 +75,8 @@
       const userStore = useUserStore();
       const getUserInfo = computed(() => {
-        const { realName = '', desc } = userStore.getUserInfo || {};
-        return { realName, desc };
+        const { realName = '', avatar, desc } = userStore.getUserInfo || {};
+        return { realName, avatar: avatar || headerImg, desc };
       });
       const [register, { openModal }] = useModal();
@@ -115,7 +115,6 @@
         getUserInfo,
         handleMenuClick,
         getShowDoc,
-        headerImg,
         register,
         getUseLockPage,
       };
 <template>
   <div class="lg:flex">
-    <Avatar :src="headerImg" :size="72" class="!mx-auto !block" />
+    <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
     <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
-      <h1 class="md:text-lg text-md">早安, Vben, 开始您一天的工作吧！</h1>
+      <h1 class="md:text-lg text-md">早安, {{ userinfo.realName }}, 开始您一天的工作吧！</h1>
       <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span>
     </div>
     <div class="flex flex-1 justify-end md:mt-0 mt-4">
@@ -23,15 +23,18 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { Avatar } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
   import headerImg from '/@/assets/images/header.jpg';
   export default defineComponent({
     components: { Avatar },
     setup() {
-      return { headerImg };
+      const userStore = useUserStore();
+      const userinfo = computed(() => userStore.getUserInfo);
+      return { userinfo, headerImg };
     },
   });
 </script>
@@ -5,7 +5,7 @@
         <a-row>
           <a-col :span="8">
             <div :class="`${prefixCls}-top__avatar`">
-              <img width="70" :src="headerImg" />
+              <img width="70" :src="avatar" />
               <span>Vben</span>
               <div>海纳百川，有容乃大</div>
             </div>
@@ -54,7 +54,7 @@
 <script lang="ts">
   import { Tag, Tabs, Row, Col } from 'ant-design-vue';
-  import { defineComponent } from 'vue';
+  import { defineComponent, computed } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import Icon from '/@/components/Icon/index';
   import Article from './Article.vue';
@@ -63,6 +63,7 @@
   import headerImg from '/@/assets/images/header.jpg';
   import { tags, teams, details, achieveList } from './data';
+  import { useUserStore } from '/@/store/modules/user';
   export default defineComponent({
     components: {
@@ -78,9 +79,11 @@
       [Col.name]: Col,
     },
     setup() {
+      const userStore = useUserStore();
+      const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
       return {
         prefixCls: 'account-center',
-        headerImg,
+        avatar,
         tags,
         teams,
         details,
@@ -7,7 +7,7 @@
       <a-col :span="10">
         <div class="change-avatar">
           <div class="mb-2"> 头像 </div>
-          <img width="140" :src="headerImg" />
+          <img width="140" :src="avatar" />
           <Upload :showUploadList="false">
             <Button class="ml-5"> <Icon icon="feather:upload" />更换头像 </Button>
           </Upload>
@@ -19,7 +19,7 @@
 </template>
 <script lang="ts">
   import { Button, Upload, Row, Col } from 'ant-design-vue';
-  import { defineComponent, onMounted } from 'vue';
+  import { computed, defineComponent, onMounted } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { CollapseContainer } from '/@/components/Container/index';
   import Icon from '/@/components/Icon/index';
@@ -29,6 +29,7 @@
   import headerImg from '/@/assets/images/header.jpg';
   import { accountInfoApi } from '/@/api/demo/account';
   import { baseSetschemas } from './data';
+  import { useUserStore } from '/@/store/modules/user';
   export default defineComponent({
     components: {
@@ -42,6 +43,7 @@
     },
     setup() {
       const { createMessage } = useMessage();
+      const userStore = useUserStore();
       const [register, { setFieldsValue }] = useForm({
         labelWidth: 120,
@@ -54,8 +56,13 @@
         setFieldsValue(data);
       });
+      const avatar = computed(() => {
+        const { avatar } = userStore.getUserInfo;
+        return avatar || headerImg;
+      });
+
       return {
-        headerImg,
+        avatar,
         register,
         handleSubmit: () => {
           createMessage.success('更新成功！');
@@ -5,7 +5,23 @@
   >
     <div
       :class="`${prefixCls}__unlock`"
-      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
+      class="
+        absolute
+        top-0
+        left-1/2
+        flex
+        pt-5
+        h-16
+        items-center
+        justify-center
+        sm:text-md
+        xl:text-xl
+        text-white
+        flex-col
+        cursor-pointer
+        transform
+        translate-x-1/2
+      "
       @click="handleShowForm(false)"
       v-show="showDate"
     >
@@ -28,9 +44,9 @@
       <div :class="`${prefixCls}-entry`" v-show="!showDate">
         <div :class="`${prefixCls}-entry-content`">
           <div :class="`${prefixCls}-entry__header enter-x`">
-            <img :src="headerImg" :class="`${prefixCls}-entry__header-img`" />
+            <img :src="userinfo.avatar || headerImg" :class="`${prefixCls}-entry__header-img`" />
             <p :class="`${prefixCls}-entry__header-name`">
-              {{ realName }}
+              {{ userinfo.realName }}
             </p>
           </div>
           <InputPassword
@@ -108,9 +124,8 @@
       const { t } = useI18n();
-      const realName = computed(() => {
-        const { realName } = userStore.getUserInfo || {};
-        return realName;
+      const userinfo = computed(() => {
+        return userStore.getUserInfo || {};
       });
       /**
@@ -141,7 +156,7 @@
       return {
         goLogin,
-        realName,
+        userinfo,
         unLock,
         errMsg,
         loading,
@@ -33,6 +33,7 @@ export interface UserInfo {
   userId: string | number;
   username: string;
   realName: string;
+  avatar: string;
   desc?: string;
 }