fe.ems.vue3/src/layouts/components/RightContent.vue

<script setup lang="ts">
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { useRouter } from 'vue-router';
import { useFullscreen } from '@vueuse/core';
import useI18n from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
import useUserStore from '@/store/modules/user';
import useAlarmStore from '@/store/modules/alarm';
import { sessionGet } from '@/utils/cache-session-utils';
const { isFullscreen, toggle } = useFullscreen();
const { t, changeLocale, optionsLocale } = useI18n();
const userStore = useUserStore();
const appStore = useAppStore();
const router = useRouter();

/**头像展开项点击 */
function fnClick({ key }: MenuInfo) {
  switch (key) {
    case 'settings':
      router.push({ name: 'Settings' });
      break;
    case 'profile':
      router.push({ name: 'Profile' });
      break;
    case 'logout':
      userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
      break;
  }
}

/**告警数按钮提示跳转 */
function fnClickAlarm() {
  router.push({ path: '/faultManage/active-alarm' });
}

/**系统使用手册跳转 */
function fnClickHelpDoc(language?: string) {
  const routeData = router.resolve({ name: 'HelpDoc' });
  let href = routeData.href;
  if (language) {
    href = `${routeData.href}?language=${language}`;
  }
  window.open(href, '_blank');
}

// 兼容旧前端可改配置文件
const i18nDisable = sessionGet('i18nDisable') === 'false';

/**改变多语言 */
function fnChangeLocale(e: any) {
  changeLocale(e.key);
}
</script>

<template>
  <a-space :size="12" align="center">
    <a-button type="text" @click="fnClickAlarm">
      <template #icon>
        <a-badge
          :count="useAlarmStore().activeAlarmTotal"
          :overflow-count="99"
          status="warning"
        >
          <BellOutlined />
        </a-badge>
      </template>
    </a-button>

    <a-tooltip placement="bottom" v-if="appStore.getHelpDoc !== '#'">
      <template #title>{{ t('loayouts.rightContent.helpDoc') }}</template>
      <a-button type="text" @click="fnClickHelpDoc()">
        <template #icon>
          <QuestionCircleOutlined />
        </template>
      </a-button>
    </a-tooltip>

    <a-tooltip placement="bottom">
      <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
      <a-button type="text" @click="toggle">
        <template #icon>
          <FullscreenExitOutlined v-if="isFullscreen" />
          <FullscreenOutlined v-else />
        </template>
      </a-button>
    </a-tooltip>

    <a-dropdown
      placement="bottom"
      :trigger="['click', 'hover']"
      v-if="!i18nDisable"
    >
      <a-button size="small" type="default">
        {{ t('i18n') }}
        <DownOutlined />
      </a-button>
      <template #overlay>
        <a-menu @click="fnChangeLocale">
          <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
            {{ opt.label }}
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

    <a-dropdown placement="bottomRight" :trigger="['click', 'hover']">
      <div class="user">
        <a-avatar
          shape="circle"
          size="default"
          :src="userStore.getAvatar"
          :alt="userStore.userName"
        ></a-avatar>
        <span class="nick">
          {{ userStore.nickName }}
        </span>
      </div>
      <template #overlay>
        <a-menu @click="fnClick">
          <!-- <a-menu-item key="profile">
            <template #icon>
              <UserOutlined />
            </template>
            <span>{{ t('loayouts.rightContent.profile') }}</span>
          </a-menu-item> -->
          <a-menu-item key="settings">
            <template #icon>
              <SettingOutlined />
            </template>
            <span>{{ t('loayouts.rightContent.settings') }}</span>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="logout">
            <template #icon>
              <LogoutOutlined />
            </template>
            <span>{{ t('loayouts.rightContent.logout') }}</span>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-space>
</template>

<style lang="less" scoped>
.user {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  .nick {
    padding-left: 8px;
    padding-right: 16px;
    font-size: 16px;
    max-width: 164px;
    white-space: nowrap;
    text-align: start;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>