lingji-work-fe/src/layouts/components/navbar/components/right-side/index.vue

<template>
  <div class="right-wrap">
    <!-- 任务中心 -->
    <div class="relative p-6px rounded-30px flex items-center justify-center task-icon" @click="setUnread">
      <SvgIcon name="svg-taskCenter" size="20" class="color-#737478" @click="openDownloadCenter" />
      <div class="w-6px h-6px rounded-50% bg-#F64B31 absolute top-6px right-6px" v-if="hasUnreadInfo"></div>
    </div>

    <!-- 灵机空间入口 -->
    <div class="agent-entry mx-16px" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>

    <!-- 头像设置 -->
    <Dropdown trigger="click" overlayClassName="layout-avatar-dropdown">
      <img alt="avatar" src="@/assets/avatar.svg" class="cursor-pointer w-32px h-32px rounded-50%" />
      <template #overlay>
        <Menu>
          <MenuItem>
            <div class="h-full flex justify-between items-center w-100%" @click="setServerMenu">
              <div class="flex items-center">
                <img :src="icon1" class="w-16px h-16px mr-8px" />
                <span>管理中心</span>
              </div>
              <icon-right size="12" />
            </div>
          </MenuItem>
          <MenuItem>
            <SubMenu value="option-1" position="lt" trigger="hover" popupClassName="enterprises-dsubmenu">
              <template #title>
                <div class="flex justify-between w-100% h-full items-center">
                  <div class="flex items-center">
                    <img :src="icon3" class="w-16px h-16px mr-8px" />
                    <span>切换企业账号</span>
                  </div>
                  <icon-right size="12" />
                </div>
              </template>
              <MenuItem
                v-for="(item, index) in enterprises"
                :key="index"
                class="rounded-8px hover:bg-#F2F3F5"
                @click="onEnterpriseItemClick(item)"
              >
                <div
                  class="flex items-center w-100% justify-between"
                  :class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
                >
                  <span>{{ item.name }}</span>
                  <icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
                </div>
              </MenuItem>
            </SubMenu>
          </MenuItem>
          <MenuItem>
            <div class="flex justify-between w-100% h-full items-center" @click="clickExit">
              <div class="flex items-center">
                <img :src="icon2" class="w-16px h-16px mr-8px" />
                <span>退出登录</span>
              </div>
              <icon-right size="12" />
            </div>
          </MenuItem>
        </Menu>
      </template>
    </Dropdown>

    <ExitAccountModal ref="exitAccountModalRef" />
    <DownloadCenterModal ref="downloadCenterModalRef" />
  </div>
</template>

<script setup>
import { Dropdown, Menu, MenuItem, SubMenu } from 'ant-design-vue';
import router from '@/router';
import { useEnterpriseStore } from '@/stores/modules/enterprise';
import { useSidebarStore } from '@/stores/modules/side-bar';
import { useUserStore } from '@/stores';
import { handleUserHome } from '@/utils/user';

import ExitAccountModal from '../exit-account-modal';
import DownloadCenterModal from '../task-center-modal';

import icon1 from '@/assets/option.svg';
import icon2 from '@/assets/exit.svg';
import icon3 from '@/assets/change.svg';

const props = defineProps({
  isAgentRoute: {
    type: Boolean,
    default: false,
  },
});

const enterpriseStore = useEnterpriseStore();
const userStore = useUserStore();
const sideBarStore = useSidebarStore();
const route = useRoute();

const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);

const exitAccountModalRef = ref(null);
const downloadCenterModalRef = ref(null);

const enterprises = computed(() => {
  return userStore.userInfo?.enterprises ?? [];
});
const enterpriseInfo = computed(() => {
  return enterpriseStore?.enterpriseInfo ?? {};
});

const openDownloadCenter = () => {
  downloadCenterModalRef.value.open();
};
const onEnterpriseItemClick = async (item) => {
  enterpriseStore.setEnterpriseInfo(item);
  window.location.reload();
};
const clickExit = async () => {
  exitAccountModalRef.value?.open();
};
const setServerMenu = () => {
  router.push('/management/person');
};
const setUnread = () => {
  if (sideBarStore.unreadInfo.length) {
    sideBarStore.removeTaskUnreadInfo();
  }
};
const handleAgentClick = () => {
  props.isAgentRoute ? handleUserHome() : router.push({ name: 'AgentIndex' });
};
</script>

<style scoped lang="scss">
@import './style.scss';
</style>
<style lang="scss">
.layout-avatar-dropdown,
.enterprises-dsubmenu {
  .ant-dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--BG-300, #e6e6e8);
    background: var(--BG-white, #fff);
    padding: 12px 0px;
    .ant-dropdown-menu-item {
      padding: 0 12px;
      margin-bottom: 4px;

      .ant-dropdown-menu-title-content {
        display: flex;
        height: 40px;
        width: 100%;
        padding: 10px 24px;
        align-items: center;
        .ant-dropdown-menu-submenu {
          width: 100%;
          .ant-dropdown-menu-submenu-title {
            padding: 0;
            &:hover {
              background: none;
            }
            .ant-dropdown-menu-title-content {
              padding: 0 !important;
            }
          }
          .ant-dropdown-menu-submenu-arrow {
            display: none;
          }
        }
      }
      .menu-item-text {
        color: var(--Text-2, #3c4043);
        font-family: $font-family-regular;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
      }
      .ant-dropdown-menu-title-content {
        border-radius: 8px !important;
      }
      &:not(.ant-dropdown-menu-item):hover {
        background-color: transparent;
        .ant-dropdown-menu-title-content {
          background: var(--BG-200, #f2f3f5);
        }
      }
    }
  }
}
.layout-avatar-dropdown,
.enterprises-dsubmenu {
  width: 200px;
  .ant-dropdown-menu {
    padding: 12px 4px;
    .ant-dropdown-menu-item {
      padding: 0 !important;
      .ant-dropdown-menu-title-content {
        padding: 0 12px !important;
      }
    }
  }
  .ant-dropdown-option-suffix {
    display: none;
  }
  // .enterprises-doption {
  //   .ant-dropdown-menu-title-content {
  //     padding: 0 !important;
  //     border-radius: 8px;
  //   }
  //   &:not(.ant-dropdown-option-disabled):hover {
  //     background-color: transparent;
  //     .ant-dropdown-menu-title-content {
  //       background: var(--BG-200, #f2f3f5);
  //     }
  //   }
  // }
}
</style>