feat: add custom nav-user-info slot

packages/components/Navbar/index.vue

@@ -14,11 +14,13 @@
           :key="index"
           @click="onSelectNav(nav)"
         >
-          <template  v-if="nav.plugin">
+          <template v-if="nav.plugin">
             <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-popover:[nav.plugin]></navbar-item>
           </template>
           <navbar-item :badge="nav.badge" :svg="nav.svg" :nav="nav" v-else></navbar-item>
         </div>
+        <!--    提供自定义用户信息插槽    -->
+        <slot name="nav-user-info" v-bind:info="userInfo"></slot>
         <el-popover
           popper-class="nav-popover"
           ref="navInfo"
@@ -29,8 +31,8 @@
           <div class="nav-user-info-group">
             <navbar-item :nav="{ icon: userInfo.avatar }" mode="vertical">
               <div class="info-group">
-                <span v-if="userInfo.name">{{userInfo.name}}</span>
-                <span v-if="userInfo.phone">{{userInfo.phone}}</span>
+                <span v-if="userInfo.name">{{ userInfo.name }}</span>
+                <span v-if="userInfo.phone">{{ userInfo.phone }}</span>
               </div>
             </navbar-item>
             <button @click="onClickOut">退出登录</button>
@@ -46,7 +48,8 @@
           <div class="nav-custom-info-group">
             <div class="info-item" v-if="hasExclusiveCustomer">
               <div class="after-tag-box recommend-tag">推荐</div>
-              <navbar-item :nav="{ label: '专属客服：' + exclusiveCustomerInfo.name, icon: 'icon-weixin_line' }"></navbar-item>
+              <navbar-item
+                :nav="{ label: '专属客服：' + exclusiveCustomerInfo.name, icon: 'icon-weixin_line' }"></navbar-item>
               <navbar-item
                 class="qrcode-group"
                 :nav="{
@@ -75,7 +78,7 @@
           <div class="nav-message-group">
             <div class="message-header">
               <div class="title">
-                消息中心 <span>（<span class="highlight-text">{{messageCount}}</span> 条未读）</span>
+                消息中心 <span>（<span class="highlight-text">{{ messageCount }}</span> 条未读）</span>
               </div>
               <JyIcon @click="closeMessagePopover" name="close"></JyIcon>
             </div>
@@ -92,14 +95,14 @@
                 <div class="message-content">
                   <div class="message-content--header">
                     <div class="message-content--title ellipsis">
-                      {{message.title}}
+                      {{ message.title }}
                     </div>
                     <div class="message-content--time">
-                      {{message.time}}
+                      {{ message.time }}
                     </div>
                   </div>
                   <div class="message-content--content">
-                    {{message.content}}
+                    {{ message.content }}
                   </div>
                 </div>
               </div>
@@ -128,19 +131,6 @@ export default {
     [NavbarSearch.name]: NavbarSearch,
     [EmptyTip.name]: EmptyTip
   },
-  created () {
-    /**
-     *
-     * TODO 获取用户数据、消息数据 待优化至应用层处理
-     */
-    this.getPower()
-    this.getUserSimpleInfo().then(() => {
-      const userInfo = this.navs.find(v => v.plugin === 'navInfo')
-      userInfo.label = this.userInfo.name || this.userInfo.phone
-      userInfo.icon = this.userInfo.avatar
-    })
-    this.getMessageInfo()
-  },
   data () {
     return {
       home: process.env.VUE_APP_BASE_SITE,
@@ -161,12 +151,6 @@ export default {
           icon: 'icon-kefu_xian',
           svg: true,
           plugin: 'navCustomer'
-        },
-        {
-          label: '',
-          icon: 'https://www.jianyu360.cn/common-module/public/image/auto.png',
-          plugin: 'navInfo',
-          class: 'nav-user-info'
         }
       ]
     }
@@ -183,6 +167,34 @@ export default {
     ...mapGetters('work-bench/navbar', [
       'messageList'
     ]),
+    // 获取是否启用自定义顶部导航用户信息自定义
+    ...mapGetters('work-bench', [
+      'useCustomStatus'
+    ])
+  },
+  created () {
+    // 判断是否配置启用自定义用户信息模块，提供默认配置
+    if (!this.useCustomStatus['nav-user-info']) {
+      this.navs.push({
+        label: '',
+        icon: 'https://www.jianyu360.cn/common-module/public/image/auto.png',
+        plugin: 'navInfo',
+        class: 'nav-user-info'
+      })
+    }
+    /**
+     *
+     * TODO 获取用户数据、消息数据 待优化至应用层处理
+     */
+    this.getPower()
+    this.getUserSimpleInfo().then(() => {
+      const userInfo = this.navs.find(v => v.plugin === 'navInfo')
+      if (userInfo) {
+        userInfo.label = this.userInfo.name || this.userInfo.phone
+        userInfo.icon = this.userInfo.avatar
+      }
+    })
+    this.getMessageInfo()
   },
   methods: {
     ...mapActions('work-bench', [
@@ -323,73 +335,88 @@ export default {
   flex-direction: row;
   align-items: center;
 }
+
 .flex-vertical {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
+
 .nav-popover {
   &.el-popper[x-placement^=bottom] {
     margin-top: 20px;
   }
+
   padding: 0;
   border: none;
   background: #FFFFFF;
-  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1000), 0px 8px 10px 1px rgba(0,0,0,0.0600), 0px 3px 14px 2px rgba(0,0,0,0.0500);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1000), 0px 8px 10px 1px rgba(0, 0, 0, 0.0600), 0px 3px 14px 2px rgba(0, 0, 0, 0.0500);
   border-radius: 8px;
   overflow: hidden;
 }
+
 .nav-custom-info-group {
   min-width: 229px;
+
   .info-item {
     position: relative;
     padding: 12px 16px;
+
     .after-tag-box {
       position: absolute;
       right: 0;
       top: 16px;
     }
+
     .qrcode-group {
       padding-bottom: 4px;
+
       .img-icon {
         width: 90px;
         height: 90px;
         border-radius: unset;
         margin-right: 0;
       }
+
       span {
         margin-left: 0;
       }
     }
+
     span {
       margin-left: 4px;
       font-size: 14px;
       color: #686868;
       line-height: 22px;
     }
+
     & + .info-item {
       border-top: 1px solid #ECECEC;
     }
   }
 }
+
 .nav-user-info-group {
   width: 150px;
   padding-top: 18px;
+
   .info-group {
     width: 100%;
     @extend .flex-vertical;
     padding: 0 16px 8px 18px;
     box-sizing: border-box;
+
     span {
       width: 100%;
       text-align: center;
       display: inline-block;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      white-space:nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
+
   button {
     width: 100%;
     height: 34px;
@@ -401,40 +428,49 @@ export default {
     cursor: pointer;
   }
 }
+
 .nav-message-group {
   width: 400px;
+
   .message-header {
     @extend .flex-horizontal;
     padding: 16px 24px;
     font-size: 16px;
     color: #1D1D1D;
     line-height: 24px;
-    box-shadow: inset 0px -1px 0px 1px rgba(0,0,0,0.0500);
+    box-shadow: inset 0px -1px 0px 1px rgba(0, 0, 0, 0.0500);
+
     .title {
       flex: 1;
     }
+
     span {
       font-size: 14px;
       color: #686868;
+
       &.highlight-text {
         color: #2ABED1;
       }
     }
+
     .icon-close {
       font-size: 20px;
       cursor: pointer;
       color: #AAAAAA;
+
       &:hover {
         color: #2cb7ca;
       }
     }
   }
+
   .message-group {
     flex: 1;
     max-width: 100%;
     max-height: 263px;
     overflow-y: scroll;
   }
+
   .message-item {
     @extend .flex-horizontal;
     align-items: flex-start;
@@ -444,52 +480,63 @@ export default {
     box-sizing: border-box;
     border-bottom: 1px solid #ECECEC;
     cursor: pointer;
+
     &:last-child {
       border-bottom: unset;
     }
+
     &:hover {
       background-color: #f5f6f7;
     }
   }
+
   .message-icon {
     flex-shrink: 0;
     width: 32px;
     height: 32px;
     border-radius: 50%;
+
     img {
       border-radius: 50%;
       overflow: hidden;
     }
-    border: 1px solid rgba(0,0,0,0.0500);
+
+    border: 1px solid rgba(0, 0, 0, 0.0500);
     margin-right: 12px;
+
     .el-badge__content.is-fixed.is-dot {
       right: 8px;
       top: 2px;
     }
   }
+
   .message-content {
     width: 316px;
     display: flex;
     flex: 1;
     flex-wrap: wrap;
     flex-direction: column;
+
     &--header {
       @extend .flex-horizontal;
       width: 100%;
       flex: 1;
       justify-content: space-between;
     }
+
     &--content {
       margin-top: 4px;
       font-size: 13px;
       color: #686868;
       line-height: 20px;
     }
+
     &--title {
       font-size: 14px;
       color: #1D1D1D;
       line-height: 22px;
     }
+
     &--time {
       flex-shrink: 0;
       font-size: 12px;
@@ -497,6 +544,7 @@ export default {
       line-height: 18px;
     }
   }
+
   button {
     background-color: transparent;
     border-top: 1px solid #ECECEC;
@@ -505,11 +553,13 @@ export default {
     color: #1D1D1D;
     line-height: 56px;
     cursor: pointer;
+
     &:hover {
       color: #2ABED1FF;
     }
   }
 }
+
 .recommend-tag {
   position: relative;
   @extend .flex-horizontal;
@@ -521,6 +571,7 @@ export default {
   font-size: 12px;
   font-weight: 400;
   color: #FFFFFF;
+
   &::before {
     content: "";
     position: absolute;
@@ -540,12 +591,14 @@ export default {
   flex-direction: row;
   align-items: center;
 }
+
 .flex-vertical {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
+
 .navbar-group {
   position: relative;
   z-index: 50;
@@ -556,14 +609,14 @@ export default {
   padding: 0 36px;
   box-sizing: border-box;
   background-color: #ffffff;
-  box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.0800);
+  box-shadow: 0px 2px 8px -1px rgba(0, 0, 0, 0.0800);
 
   .nav-user-info {
     ::v-deep .navbar-item--label {
       max-width: 118px;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      white-space:nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
@@ -572,6 +625,7 @@ export default {
     width: auto;
     height: 32px;
     cursor: pointer;
+
     img {
       height: 100%;
     }
@@ -581,6 +635,7 @@ export default {
     @extend .flex-horizontal;
     flex: 1;
     justify-content: space-between;
+
     .search-module {
       margin-left: 82px;
       margin-right: 16px;
@@ -595,9 +650,11 @@ export default {
     font-weight: 400;
     color: #1D1D1D;
     line-height: 24px;
+
     .nav-item {
       height: 32px;
     }
+
     .nav-item + .nav-item {
       margin-left: 48px;
     }

packages/layout/work-bench/index.vue

@@ -1,10 +1,15 @@
 <template>
   <work-bench-layout>
     <template v-slot:nav>
-      <router-view name="nav"></router-view>
+      <router-view name="nav">
+        <template v-slot:nav-user-info="{ info }">
+          <slot name="nav-user-info" v-bind:info="info"></slot>
+        </template>
+      </router-view>
     </template>
     <template v-slot:menu>
-      <router-view v-show="$route.query.aside !== '0'" name="menu" :before-select="onBeforeSelect" @open="onOpenMenu"></router-view>
+      <router-view v-show="$route.query.aside !== '0'" name="menu" :before-select="onBeforeSelect"
+                   @open="onOpenMenu"></router-view>
     </template>
     <router-view id="work-bench-container"></router-view>
   </work-bench-layout>
@@ -120,21 +125,24 @@ export default {
 
 <style lang="scss">
 @import "../../style/index";
+
 .content-shadow {
   background: #FFFFFF;
-  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.0800);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0800);
   border-radius: 5px 5px 5px 5px;
 }
+
 .abnormal-tip {
   margin: $padding-lg;
   padding: $padding-xl;
   @extend .content-shadow;
 }
 
-.custom-message-box{
-  width: 380px!important;
+.custom-message-box {
+  width: 380px !important;
   border-radius: 8px;
-  .custom-confirm-btn{
+
+  .custom-confirm-btn {
     margin-top: 12px;
     width: 132px;
     height: 36px;
@@ -143,7 +151,8 @@ export default {
     border: 0;
     font-size: 16px;
   }
-  .el-message-box__message{
+
+  .el-message-box__message {
     font-size: 14px;
     color: #686868;
   }

packages/store/modules/user.js

@@ -53,8 +53,8 @@ export default {
     exclusiveCustomerInfo (state) {
       let defaultInfo = [
         {
-          'name': '方磊',
-          'wxer': 'https://cdn-ali2.jianyu360.com/qmxupload/2022/03/09/202203091454010039P8IemnZ.png'
+          name: '方磊',
+          wxer: 'https://cdn-ali2.jianyu360.com/qmxupload/2022/03/09/202203091454010039P8IemnZ.png'
         }
       ]
       if (Array.isArray(state.userSimpleInfo?.customers)) {
@@ -70,6 +70,7 @@ export default {
       return {
         phone: state.userSimpleInfo?.phone || '',
         name: userName,
+        entName: state?.power.entname,
         avatar: state.userSimpleInfo?.headImage || 'https://www.jianyu360.cn/common-module/public/image/auto.png'
       }
     }