mky-vent-base/src/layouts/default/header/components/user-dropdown/index.vue

<template>
  <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
      <img :class="`${prefixCls}__header`" :src="getAvatarUrl" />
      <span :class="`${prefixCls}__info hidden md:block`">
        <span :class="`${prefixCls}__name  `" class="truncate">
          {{ getUserInfo.realname }}
        </span>
      </span>
    </span>

    <template #overlay>
      <Menu @click="handleMenuClick">
        <!-- <MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" /> -->
        <MenuDivider v-if="getShowDoc" />
        <MenuItem key="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" />
        <MenuItem key="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
        <MenuItem key="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
        <MenuItem key="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
        <MenuItem v-if="sysOrgCode != 'sdmtjtgsd'" key="modalCache" :text="t('layout.header.dropdownItemSwitchModal')" icon="ion:sync-outline" />
        <!-- <MenuItem v-if="sysOrgCode != 'sdmtjtgsd'" key="switchTheme" :text="t('layout.header.dropdownItemSwitchTheme')" icon="ion:color-palette" /> -->
        <!-- <MenuItem
            v-if="getUseLockPage"
            key="lock"
            :text="t('layout.header.tooltipLock')"
            icon="ion:lock-closed-outline"
        />-->
        <MenuItem key="download" :text="t('layout.header.dropdownItemApp')" icon="ion:download-outline" />
        <MenuItem key="homeStyle" :text="t('layout.header.dropdownItemHomeStyle')" icon="ion:home-outline" />
        <MenuItem key="about" :text="t('layout.header.dropdownItemAbout')" icon="ion:information-outline" />
        <MenuItem key="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline" />
      </Menu>
    </template>
  </Dropdown>
  <LockAction v-if="lockActionVisible" ref="lockActionRef" @register="register" />
  <DepartSelect ref="loginSelectRef" />
  <ThemeSelect ref="themeSelectRef" />
  <HomeStyleSelect ref="homeStyleSelectRef" />
  <UpdatePassword v-if="passwordVisible" ref="updatePasswordRef" />
</template>
<script lang="ts">
// components
import { Dropdown, Menu, message } from 'ant-design-vue';

import { defineComponent, computed, ref } from 'vue';

import { SITE_URL } from '/@/settings/siteSetting';

import { useUserStore } from '/@/store/modules/user';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useGo } from '/@/hooks/web/usePage';
import headerImg from '/@/assets/images/header.jpg';
import { propTypes } from '/@/utils/propTypes';
import { openWindow } from '/@/utils';
import { useGlobSetting } from '/@/hooks/setting';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

import { refreshCache, queryAllDictItems, refreshRedis } from '/@/views/system/dict/dict.api';
import { DB_DICT_DATA_KEY } from '/@/enums/cacheEnum';
import { removeAuthCache, setAuthCache } from '/@/utils/auth/index';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { getRefPromise } from '/@/utils/index';
import { get } from 'lodash-es';
import { getLatestAppDownload } from '/@/api/vent';

type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart' | 'modalCache' | 'switchTheme' | 'info' | 'homeStyle' | 'download';
const { createMessage, createConfirmSync } = useMessage();
export default defineComponent({
  name: 'UserDropdown',
  components: {
    Dropdown,
    Menu,
    MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
    MenuDivider: Menu.Divider,
    LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
    DepartSelect: createAsyncComponent(() => import('./DepartSelect.vue')),
    ThemeSelect: createAsyncComponent(() => import('./ThemeSelect.vue')),
    HomeStyleSelect: createAsyncComponent(() => import('./HomeStyleSelect.vue')),
    UpdatePassword: createAsyncComponent(() => import('./UpdatePassword.vue')),
  },
  props: {
    theme: propTypes.oneOf(['dark', 'light']),
  },
  setup() {
    const { sysOrgCode, domainUrl } = useGlobSetting();
    const { prefixCls } = useDesign('header-user-dropdown');
    const { t } = useI18n();
    const { getShowDoc, getUseLockPage } = useHeaderSetting();
    const userStore = useUserStore();
    const go = useGo();
    const passwordVisible = ref(false);
    const lockActionVisible = ref(false);
    const lockActionRef = ref(null);

    const getUserInfo = computed(() => {
      const { realname = '', avatar, desc } = userStore.getUserInfo || {};
      return { realname, avatar: avatar || headerImg, desc };
    });

    const getAvatarUrl = computed(() => {
      let { avatar } = getUserInfo.value;
      if (avatar == headerImg) {
        return avatar;
      } else {
        return getFileAccessHttpUrl(avatar);
      }
    });

    const [register, { openModal }] = useModal();
    /**
     * 多部门弹窗逻辑
     */
    const loginSelectRef = ref();
    // update-begin--author:liaozhiyang---date:20230901---for：【QQYUN-6333】空路由问题—首次访问资源太大
    async function handleLock() {
      await getRefPromise(lockActionRef);
      openModal(true);
    }
    // update-end--author:liaozhiyang---date:20230901---for：【QQYUN-6333】空路由问题—首次访问资源太大
    //  login out
    function handleLoginOut() {
      userStore.confirmLoginOut();
    }

    // open doc
    function openDoc() {
      openWindow(SITE_URL);
    }

    async function downloadApp() {
      const confirmed = await createConfirmSync({
        title: '应用下载',
        content: '是否下载？',
      });
      if (!confirmed) {
        return;
      }

      const app = await getLatestAppDownload();
      if (!app?.filename || !app?.downloadUrl) {
        createMessage.warning('未获取到应用下载路径');
        return;
      }

      const downloadUrl = /^https?:\/\//i.test(app.downloadUrl) ? app.downloadUrl : `${domainUrl}${app.downloadUrl}`;
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = app.filename;
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      createMessage.success('应用下载已开始，请在浏览器下载列表中查看');
    }

    // 清除缓存
    async function clearCache() {
      const result = await refreshCache();
      const refreshRedisResult = await refreshRedis();
      if (result.success && refreshRedisResult) {
        const res = await queryAllDictItems();
        removeAuthCache(DB_DICT_DATA_KEY);
        setAuthCache(DB_DICT_DATA_KEY, res.result);
        createMessage.success('刷新缓存完成！');
      } else {
        createMessage.error('刷新缓存失败！');
      }
    }

    function clearModalCache() {
      return new Promise((resolve) => {
        if (window['CustomDB']) {
          // 清除指定表的所有数据
          window['CustomDB'].modal
            .clear()
            .then(() => {
              console.log('表数据已成功清除！');
              resolve(null);
              window.location.reload();
            })
            .catch((error) => {
              console.error('清除数据时发生错误:', error);
              resolve(null);
              window.location.reload();
            });
        }
      });
    }

    // 切换部门
    function updateCurrentDepart() {
      loginSelectRef.value.show();
    }
    // 修改密码
    const updatePasswordRef = ref();
    // update-begin--author:liaozhiyang---date:20230901---for：【QQYUN-6333】空路由问题—首次访问资源太大
    async function updatePassword() {
      passwordVisible.value = true;
      await getRefPromise(updatePasswordRef);
      updatePasswordRef.value.show(userStore.getUserInfo.username);
    }
    // update-end--author:liaozhiyang---date:20230901---for：【QQYUN-6333】空路由问题—首次访问资源太大
    function handleMenuClick(e: { key: MenuEvent }) {
      switch (e.key) {
        case 'homeStyle':
          updateHomeStyle();
          break;
        case 'about':
          message.info(`当前版本：${get(window, '__LAST_PRODUCTION_TAG__.version', '开发模式')}`);
          break;
        case 'logout':
          handleLoginOut();
          break;
        case 'doc':
          openDoc();
          break;
        case 'lock':
          handleLock();
          break;
        case 'cache':
          clearCache();
          break;
        case 'modalCache':
          clearModalCache();
          break;
        case 'depart':
          updateCurrentDepart();
          break;
        case 'switchTheme':
          updateTheme();
          break;
        case 'password':
          updatePassword();
          break;
        case 'download':
          downloadApp();
          break;
        case 'account':
          //update-begin---author:wangshuai ---date:20221125  for：进入用户设置页面------------
          go(`/system/usersetting`);
          //update-end---author:wangshuai ---date:20221125  for：进入用户设置页面--------------
          break;
      }
    }

    /**
     * 切换主题弹窗
     */
    const themeSelectRef = ref();
    function updateTheme() {
      themeSelectRef.value.show();
    }

    // 首页风格弹窗
    const homeStyleSelectRef = ref();
    function updateHomeStyle() {
      homeStyleSelectRef.value.show();
    }

    return {
      prefixCls,
      t,
      getUserInfo,
      getAvatarUrl,
      handleMenuClick,
      getShowDoc,
      register,
      getUseLockPage,
      loginSelectRef,
      themeSelectRef,
      homeStyleSelectRef,
      updateHomeStyle,
      updatePasswordRef,
      passwordVisible,
      lockActionVisible,
      sysOrgCode,
    };
  },
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-user-dropdown';
@ventSpace: zxm;

.@{prefix-cls} {
  //height: @header-height;
  height: 48px;
  padding: 0 0 0 10px;
  padding-right: 10px;
  // overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  align-items: center;
  color: @text-color-base;

  img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  &__header {
    border-radius: 50%;
  }

  &__name {
    font-size: 14px;
  }

  &--dark {
    &:hover {
      background-color: @header-dark-bg-hover-color;
    }
  }

  &--light {
    &:hover {
      //background-color: @header-light-bg-hover-color;
    }

    .@{prefix-cls}__name {
      //color: @text-color-base;
      color: @white;
    }

    .@{prefix-cls}__desc {
      //color: @header-light-desc-color;
      color: @white;
    }
  }

  &-dropdown-overlay {
    .@{ventSpace}-dropdown-menu-item {
      min-width: 160px;
    }
  }
}
</style>