web/packages/work-bench-frame/packages/components/Navbar/index.vue

<template>
  <div class="navbar-group">
    <div class="logo">
      <img :src="logo" alt="logo" @click="goSiteHome">
      <h1>剑鱼工作台</h1>
    </div>
    <div class="navbar-content-group">
      <div class="website-group">
        <div
          class="website-item"
          v-for="(site, index) in websites"
          :key="index"
          @click="onWebsiteNav(site)"
        >
         <i class="iconfont" :class="site.icon"></i>
         <span>{{site.label}}</span>
        </div>
      </div>
      <section class="navbar-content-group--right">
        <!--   头部搜索模块   -->
        <navbar-search class="search-module"></navbar-search>
        <div class="nav-group">
          <div
            class="nav-item"
            :class="nav.class"
            v-for="(nav, index) in computedNaves"
            :key="index"
            @click="onSelectNav(nav)"
          >
            <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"
            placement="bottom"
            trigger="hover"
            :visible-arrow="false"
          >
            <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>
                </div>
              </navbar-item>
              <button @click="onClickOut">退出登录</button>
            </div>
          </el-popover>
          <el-popover
            popper-class="nav-popover"
            ref="navCustomer"
            placement="bottom"
            trigger="hover"
            :visible-arrow="false"
          >
            <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
                  class="qrcode-group"
                  :nav="{
                  label: '微信扫一扫',
                  icon: exclusiveCustomerInfo.qrcode
                }"
                  mode="vertical"
                >
                </navbar-item>
              </div>
              <div class="info-item" @click="onClickCustomer('在线咨询')">
                <navbar-item :nav="{ label: '在线咨询', icon: 'icon-kefu_xian' }" :svg="true"></navbar-item>
              </div>
              <div class="info-item" @click="onClickCustomer('客服热线')">
                <navbar-item :nav="{ label: '客服热线：400-108-6670', icon: 'icon-telphone_line' }"></navbar-item>
              </div>
            </div>
          </el-popover>
        </div>
      </section>
    </div>
    <div v-if="showCustomer" class="customer-container">
      <iframe :src="customerUrl" name="_blank" frameborder="0" width="100%" height="100%"></iframe>
    </div>
  </div>
</template>

<script>
import NavbarItem from './components/item'
import NavbarSearch from './components/search'
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
import EmptyTip from '../Empty'
import {debounce} from 'lodash'

export default {
  name: 'header-navbar',
  components: {
    NavbarSearch,
    [NavbarItem.name]: NavbarItem,
    [NavbarSearch.name]: NavbarSearch,
    [EmptyTip.name]: EmptyTip
  },
  data () {
    return {
      home: process.env.VUE_APP_BASE_SITE,
      logo: process.env.VUE_APP_SIMPLE_LOGO,
      navs: [
        // {
        //   label: '前往官网',
        //   icon: 'icon-houtui'
        // },
        {
          label: '消息中心',
          icon: 'icon-nav-message',
          badge: 0
        },
        {
          label: '客服',
          icon: 'icon-kefu_xian',
          svg: true,
          plugin: 'navCustomer'
        }
      ],
      websites: [
        {
          label: '标讯主站',
          icon: 'icon-a-Property1gray1'
        },
        {
          label: '剑鱼官网',
          icon: 'icon-a-Property1gray2'
        },
        {
          label: '商情门户',
          icon: 'icon-a-Property1gray'
        }
      ]
    }
  },
  computed: {
    ...mapState('work-bench/navbar', [
      'messageCount',
      'todoCount'
    ]),
    ...mapGetters('work-bench/user', [
      'hasExclusiveCustomer',
      'exclusiveCustomerInfo',
      'userInfo'
    ]),
    ...mapGetters('work-bench/navbar', [
      'messageList'
    ]),
    // 获取是否启用自定义顶部导航用户信息自定义
    ...mapGetters('work-bench', [
      'useCustomStatus'
    ]),
    ...mapState('customer', [
      'showCustomer',
      'customerUrl'
    ]),
    computedNaves () {
      return this.navs.filter(item => {
        return this.todoCount ? item : item.label!== '待办'
      })
    }
  },
  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()
  },
  mounted () {
    window.addEventListener('message', (event) => {
      // 子页面发送来得消息是关闭或是全屏操作时 关闭当前侧边栏会话窗口
      if (event.data && event.data.action) {
        if (event.data.action === 'close') {
          this.setCustomerStatus(false)
        } else if (event.data.action ==='fullScreen') {
          this.setCustomerStatus(false)
          window.open(this.customerUrl.replace('&from=aside', '&mini=1'))
        }
      }
    }, false)
  },
  beforeDestroy () {
    window.removeEventListener('message', () => {})
  },
  methods: {
    ...mapActions('work-bench', [
      'getPower',
      'getUserSimpleInfo',
      'setSignOut',
      'getMessages',
      'setClickMessage',
      'setReadMessage',
      'navbarConvergeSearch'
    ]),
    ...mapMutations('customer', [
      'setCustomerStatus'
    ]),
    /**
     * 获取消息数据
     */
    async getMessageInfo () {
      await this.getMessages()
      this.navs.find(v => v.label === '消息中心').badge = this.messageCount  > 99 ? '99+' : this.messageCount
      /**
       * 对外提供未读消息条数更新事件
       */
      this.$BRACE.$emit('update-message-count', this.messageCount)
    },
    /**
     * 点击退出登录
     */
    onClickOut () {
      this.setSignOut()
    },
    /**
     * 点击选中导航 Item
     */
    onSelectNav (nav) {
      switch (nav.label) {
        case '消息中心': {
          this.goSiteMessage()
          break
        }
        case '前往官网': {
          this.goSiteHome()
          break
        }
        case '待办': {
          this.goSiteTodo()
          break
        }
      }
    },
    /**
     * 前往消息中心页面
     */
    goSiteMessage () {
      this.$BRACE.$emit({
        fKey: 'goSiteMessage',
        spareFn: (link) => this.$BRACE.methods.open({
          route: { link }
        })
      }, '/swordfish/frontPage/messageCenter/sess/index')
    },
    /**
     * 前往官网首页
     */
    goSiteHome () {
      this.$BRACE.$emit({
        fKey: 'goSiteHome',
        spareFn: (link) => this.$BRACE.methods.open({
          route: { link }
        })
      }, this.home)
    },
    /**
     *  点击客服 Item
     * @param type - 类型
     */
    onClickCustomer (type) {
      this.$BRACE.$emit('click-nav-customer', type)
    },
    /**
     * 前往商情门户（资讯站群）
     */
    goSiteCms () {
      this.$BRACE.$emit({
        fKey: 'goSiteCms',
        spareFn: (link) => this.$BRACE.methods.open({
          route: { link }
        })
      }, '/jycms')
    },
    /**
     * 前往剑鱼官网（brand）
     */
    goSiteBrand () {
      this.$BRACE.$emit({
        fKey: 'goSiteBrand',
        spareFn: (link) => this.$BRACE.methods.open({
          route: { link }
        })
      }, '/brand')
    },
    onWebsiteNav (nav) {
      switch (nav.label) {
        case '标讯主站': {
          this.goSiteHome()
          break
        }
        case '剑鱼官网': {
          this.goSiteBrand()
          break
        }
        case '商情门户': {
          this.goSiteCms()
          break
        }
      }
    }
  }
}
</script>
<style lang="scss">
.flex-horizontal {
  display: flex;
  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);
  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;
    }
  }

  button {
    width: 100%;
    height: 34px;
    background: #F5F6F7;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #686868;
    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);

    .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;
    width: 100%;
    max-width: 100%;
    padding: 12px 24px;
    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);
    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;
      color: #999999;
      line-height: 18px;
    }
  }

  button {
    background-color: transparent;
    border-top: 1px solid #ECECEC;
    width: 100%;
    font-size: 16px;
    color: #1D1D1D;
    line-height: 56px;
    cursor: pointer;

    &:hover {
      color: #2ABED1FF;
    }
  }
}

.recommend-tag {
  position: relative;
  @extend .flex-horizontal;
  display: inline-flex;
  height: 20px;
  padding-left: 16px;
  padding-right: 8px;
  background: linear-gradient(136deg, #FF9F40 0%, #FF3A20 100%);
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;

  &::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -8px;
    background: #fff;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    border-radius: 2px;
  }
}
</style>
<style scoped lang="scss">
.flex-horizontal {
  display: flex;
  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;
  @extend .flex-horizontal;
  justify-content: space-between;
  min-height: 64px;
  min-width: 800px;
  padding: 0 24px;
  box-sizing: border-box;
  background-color: #ffffff;
  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;
    }
  }

  .logo {
    display: flex;
    align-items: center;
    width: auto;
    height: 32px;
    cursor: pointer;

    img {
      height: 100%;
    }
    h1{
      margin-left: 8px;
      font-size: 18px;
      line-height: 24px;
      color: #2ABED1;
    }
  }

  .navbar-content-group {
    @extend .flex-horizontal;
    flex: 1;
    justify-content: space-between;

    .search-module {
      margin-left: 32px;
      margin-right: 20px;
      flex: 1;
      max-width: 440px;
    }
    &--right{
      flex: 1;
      @extend .flex-horizontal;
      justify-content: flex-end;
    }
  }

  .nav-group {
    @extend .flex-horizontal;
    font-size: 16px;
    font-weight: 400;
    color: #1D1D1D;
    line-height: 24px;

    .nav-item {
      height: 32px;
    }

    .nav-item + .nav-item {
      margin-left: 20px;
    }
  }
  .website-group{
    @extend .flex-horizontal;
    margin-left: 16px;
    .website-item{
      @extend .flex-horizontal;
      padding: 6px 8px;
      margin-right: 10px;
      font-size: 14px;
      border-radius: 6px;
      color: #1D1D1D;
      border: 1px solid rgba(0, 0, 0, 0.08);
      cursor: pointer;
      .iconfont{
        margin-right: 4px;
        color: #686868;
        font-size: 20px;
      }
      &:hover{
        color: #fff;
        background: #2ABED1;
        border-color: #2ABED1;
        i{
          color: #fff;
        }
      }
    }
  }
  .customer-container{
    // display: none;
    position: fixed;
    right: 84px;
    bottom: 80px;
    max-height: 674px;
    min-height: 400px;
    width: 460px;
    height: calc(100% - 40px);
    box-shadow: 0 0 20px 0 rgba(8, 31, 38, 0.12);
    border-radius: 8px;
    overflow: hidden;
    z-index: 9999;
  }
  @media screen and (max-height: 800px) {
    .customer-container{
      bottom: 20px;
    }
  }
}
</style>