SaaS-lib/lib/paas/view/system/layout/header.vue

<!-- @format -->

<template>
  <a-layout-header class="header">
    <a-row type="flex">
      <a-col class="nav-item nav-logo">
        <!--logo-->
        <img v-if="!customAppLogo" class="app-logo" :src="imageUrl" />
        <ns-icon v-else style="width: 100px; height: 30px" class="headerLogin" name="headerLogin" />
      </a-col>
      <a-col class="nav-item nav-menu">
        <!--产品与服务-->
        <ns-start-menu />
      </a-col>

      <a-col class="nav-item nav-region">
        <!--地域-->
        <nav-region />
      </a-col>
      <a-col flex="1 1 0%">
        <!--占位-->
      </a-col>
      <a-col class="nav-item nav-notice" v-if="showNotify">
        <!--通知中心-->
        <div class="notify" @click="gotoNotify()" title="通知中心">
          <span>通知中心</span>
          <i class="tip" v-if="notifies.length > 0"></i>
        </div>
      </a-col>
      <a-col class="nav-item nav-user">
        <!--用户菜单-->
        <ns-icon name="user" class="icon-user" />
        <a-dropdown :trigger="['click']">
          <a class="ant-dropdown-link" @click.prevent>
            {{ userName }}
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu v-for="(item, index) in userMenus" :key="index">
              <a-menu-item key="index">
                <a @click="onUserMenu(item.name)">{{ item.label }}</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-col>

      <a-col>
        <!--      <div class="plugins right">-->
        <!--        <div class="theme-dropdown">-->
        <!--          <a-dropdown-->
        <!--            :trigger="['click']"-->
        <!--            :overlayStyle="{ width: '220px' }"-->
        <!--            v-model:visible="themeVisible"-->
        <!--          >-->
        <!--            <BgColorsOutlined :style="{ fontSize: '18px', color: themeColor?.hex || themeColor }" />-->
        <!--            <template #overlay>-->
        <!--              <NsColorPicker v-model:value="themeColor" />-->
        <!--            </template>-->
        <!--          </a-dropdown>-->
        <!--        </div>-->
        <!--      </div>-->
      </a-col>
    </a-row>
  </a-layout-header>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { loginService } from '/nerv-lib/paas/store/modules/login-service';
  import { DownOutlined } from '@ant-design/icons-vue';
  import NsStartMenu from './start-menu.vue';
  import NavRegion from './region.vue';
  import { storeToRefs } from 'pinia';
  import { debouncedWatch } from '@vueuse/core';
  import { appConfigStore } from '/nerv-lib/paas/store/modules/app-config';
  export default defineComponent({
    name: 'NsHeader',
    components: { NsStartMenu, DownOutlined, NavRegion },
    props: {
      // eslint-disable-next-line vue/require-valid-default-prop
      headerList: { type: Array, default: () => [] },
      initHeaderKey: { type: Array },
      notifies: { type: Array, default: () => [] },
      showNotify: {
        type: Boolean,
        default: false,
      },
    },
    setup: () => {
      const loginMap = loginService();
      let { userName } = storeToRefs(loginMap);
      const imageUrl = ref('/api/passport/objs/LogoImage/logo.png');
      const appConfig = appConfigStore();
      let themeColor = ref('#194d33');
      let themeVisible = ref(false);

      function changeTheme(color) {
        // replaceStyleVariables({ colorVariables: [...getThemeColors(color)] });
      }

      debouncedWatch(
        () => themeColor.value,
        () => {
          changeTheme(themeColor.value?.hex);
        },
        {
          debounce: 500,
        },
      );
      return {
        customAppLogo: appConfig.customAppLogo,
        imageUrl,
        userName,
        themeColor,
        themeVisible,
      };
    },
    data() {
      return {
        region: { value: '' },
        userMenus: [{ label: '退出', name: 'exit' }],
      };
    },
    methods: {
      gotoNotify() {
        // if (this.authorizationService.isCurrentApp('nervui-notify')) {
        //   if (this.region) {
        //     this.router.navigate(['/notify/WebConsoleMsg'], {
        //       relativeTo: this.route,
        //       replaceUrl: true,
        //       queryParams: { view: 'unreadWebConsoleMsg', region: this.region.value },
        //     });
        //   } else {
        //     this.router.navigate(['/notify/WebConsoleMsg'], {
        //       relativeTo: this.route,
        //       replaceUrl: true,
        //       queryParams: { view: 'unreadWebConsoleMsg' },
        //     });
        //   }
        //   return;
        // }
        if (this.region) {
          window.location.href =
            '/nervui-notify/notify/unWebConsoleMsg/list?&region=' + this.region.value;
        } else {
          window.location.href = '/nervui-notify/notify/unWebConsoleMsg/list';
        }
      },
      onUserMenu(name: string) {
        if (name === 'exit') {
          const loginMap = loginService();
          loginMap.logout();
        }
      },
    },
  });
</script>

<style lang="less" scoped>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    line-height: 48px;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0 2px 20px 0 rgb(23 46 1 / 3%);
    // border-bottom: 1px solid #f2f2f2;

    .ant-row {
      width: 100%;

      .nav-item {
        display: flex;
        align-items: center;
        padding-left: 16px;
        color: @layout-header-color;
        font-size: 12px;
      }

      .nav-logo {
        height: 48px;
        overflow: hidden;

        .icon-logo {
          width: 60px !important;
          height: 36px !important;
          color: @layout-header-link-color !important;
        }
        .app-logo {
          width: 60px;
          height: 25px;
          margin: 11px 3px 11px 0;
        }
      }

      .nav-user {
        padding: 0 16px;
        .icon-user {
          width: 18px !important;
          height: 18px !important;
          color: @layout-header-link-color !important;
          margin-right: 8px;
        }
        a {
          color: @layout-header-link-color !important;
        }
      }

      .notify {
        position: relative;
        color: @layout-header-color;
        .tip {
          position: absolute;
          top: 16px;
          right: -4px;
          display: block;
          width: 8px;
          height: 8px;
          transform: scale(0.8);
          background: #ff1744;
          border-radius: 50%;
        }
      }
    }

    :deep(
        .ant-dropdown-trigger > .anticon.anticon-down,
        .ant-dropdown-link > .anticon.anticon-down,
        .ant-dropdown-button > .anticon.anticon-down
      ) {
      vertical-align: middle;
    }

    .theme-dropdown {
      padding: 0 8px;
      cursor: pointer;
    }
  }
</style>