dvcp_v2_webapp/src/components/headerNav.vue

<template>
  <div class="headerNav navBg">
    <div style="position: relative">
      <ai-icon type="logo" :icon="system.logo||'iconcunwei'"/>
      <ai-icon type="logo" :icon="system.logo||'iconcunwei'" class="textShadow"/>
    </div>
    <span class="headerTitle">{{ system.fullTitle }}<div class="textShadow" v-html="system.fullTitle"/></span>
    <el-row type="flex" align="middle" class="toolbar">
      <!--下载中心-->
      <downloan-center-btn v-if="extra.downloadCenter"/>
      <!--大屏按钮-->
      <dv-btn v-if="extra.dv"/>
      <div class="btn" v-if="extra.showTool" @click="home.showTool=false">隐藏工具栏</div>
      <div class="btn" v-if="extra.helpDoc" @click="openHelp">帮助文档</div>
      <app-qrcode v-if="extra.appQRCode"/>
      <div class="btn" v-if="extra.customerService" @click.native="openAiService">
        <div class="iconfont iconCustomer_Service"></div>
        <div>智能客服</div>
      </div>
      <!--推荐链接-->
      <link-btn/>
    </el-row>
    <el-dropdown @visible-change="v=>isClick=v" @command="doMenu" class="rightDropdown">
      <el-row type="flex" align="middle">
        <el-avatar :src="user.info.avatar">
          {{ defaultAvatar }}
        </el-avatar>
        <span>{{ [user.info.name, user.info.roleName].join(" - ") }}</span>
        <i :class="dropdownIcon"/>
      </el-row>
      <el-dropdown-menu>
        <el-dropdown-item command="user">用户中心</el-dropdown-item>
        <el-dropdown-item command="signOut">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import {mapState} from "vuex";
import DvBtn from "./headerTools/dvBtn";
import DownloanCenterBtn from "./headerTools/downloanCenterBtn";
import extra from "../config.json"
import AppQrcode from "./headerTools/appQrcode";
import LinkBtn from "./headerTools/linkBtn";

export default {
  name: 'headerNav',
  components: {LinkBtn, AppQrcode, DownloanCenterBtn, DvBtn},
  data() {
    return {
      extra,
      isClick: false,
    }
  },
  computed: {
    ...mapState(['user', 'sys']),
    dropdownIcon() {
      return this.isClick ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
    },
    defaultAvatar() {
      return this.user.info.name?.slice(-2) || "游客"
    },
    system: v => v.sys?.info || {}
  },
  created() {
    this.$dict.load('fileFrom');
  },
  methods: {
    // 获取最新的安卓、ios下载二维码
    doMenu(comm) {
      switch (comm) {
        case 'signOut':
          //登出
          this.$confirm("是否要登出?", {type: "warning"}).then(() => {
            this.$store.commit("signOut")
          }).catch(() => {
          })
          break;
        case 'user':
          this.$router.push({name: "个人中心"})
          break;
      }
    },
    openAiService() {
      window.open('http://v3.faqrobot.org/robot/chat1.html?sysNum=153543696570625098')
    },
    openHelp() {
      window.open('https://www.yuque.com/books/share/eeaaa5e3-a528-42eb-872e-20d661f3d0e2')
    },
    changeStatus(id) {
      this.$request.post(`/app/sysuserdownload/addOrUpdate`, {
        id, status: "2"
      }).then(res => {
        if (res?.code == 0) {
          this.getFiles();
        }

      });
    },
  }
}
</script>


<style lang="scss" scoped>
.headerNav {
  display: flex;
  align-items: center;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 48px;
  position: fixed;
  z-index: 99;
  height: 48px;
  padding-left: 24px;
  box-sizing: border-box;
  top: 0;
  color: white;
  font-size: 14px;

  .AiIcon {
    font-size: 38px;
    width: auto;
    height: auto;
    background: linear-gradient(180deg, #FFFFFF 0%, #CCDBF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    &:hover {
      color: white;
    }
  }

  .headerTitle {
    flex: 1;
    min-width: 0;
    font-size: 24px;
    color: #FFF;
    line-height: 28px;
    background: linear-gradient(180deg, #FFFFFF 0%, #CCDBF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    margin-left: 8px;
    position: relative;
  }

  :deep(.toolbar) {
    gap: 12px;
    margin-right: 32px;

    .btn {
      padding: 0 12px;
      color: white;

      &:hover {
        cursor: pointer;
        color: rgba(#fff, .8);
      }
    }
  }

  .el-dropdown {
    height: 48px;
    line-height: 48px;
    color: #fff;
    padding: 0 12px;

    &:hover {
      background-color: rgba(46, 51, 68, .15);
      color: white;
    }
  }

  .el-image {
    margin: 12px 0 12px 16px;
  }

  .download-wrapper {
    position: relative;

    &:hover .download {
      display: flex;
    }

    .download {
      display: none;
      position: absolute;
      top: 100%;
      left: 12px;
      transform: translateX(-90%);
      width: auto;
      height: auto;
      padding: 12px;
      background: #fff;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      box-sizing: border-box;
      z-index: 999;
    }

    .download-item {
      text-align: center;

      &:first-child {
        margin-right: 13px;
      }

      & > img {
        width: 105px;
        height: 105px;
        margin-bottom: 7px;
      }

      p {
        margin-top: 5px;
        font-size: 13px;
        color: #333;
        text-align: center;
      }

      .download-item__middle {
        img {
          width: 13px;
          height: 16px;
          vertical-align: sub;
        }

        span {
          padding-left: 8px;
          font-size: 13px;
          color: #333;
        }
      }
    }
  }

  :deep(.rightDropdown) {
    font-size: 12px;
    padding: 0 16px;
    height: 48px;
    background: rgba(#fff, .1);

    .el-avatar > img {
      width: 100%;
    }

    .el-row {
      gap: 4px;
    }
  }
}

</style>