shalu-velofex/apps/web-velofex/src/layouts/header/header.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import { SvgArrowRightIcon } from '@vben/icons';
import { useAccessStore, useUserStore } from '@vben/stores';

import useAvatar from '@/assets/image/user.png';
import { $t } from '@/locales';
import { Dropdown, message, Modal } from 'antdv-next';

import Logo from '#/assets/image/logo.png';
import { router } from '#/router';

import SelectLang from '../select-lang.vue';

const userStore = useUserStore();

const accessStore = useAccessStore();

const token = accessStore.accessToken;

const isLogin = computed(() => !!userStore.userInfo);

const menus = computed(() => [
  { title: $t('homeMenu.toolDownloads'), path: '/Views/Tools/Index.html' },
  {
    title: $t('homeMenu.aIGeneratedApps'),
    path: '/Views/Designer/AIGenerateApp.html',
  },
  {
    title: $t('homeMenu.aIAssistants'),
    path: '/Views/Designer/AIAssistant.html',
  },
  {
    title: $t('homeMenu.shaluAcademy'),
    path: `/Views/Account/SSOIndex.html?system=design&token=${token}`,
  },
  {
    title: $t('homeMenu.applicationMarket'),
    path: '/Views/Designer/systemAppStore.html?tab=application',
  },
]);

const menuList = ref();

function openLogin() {}

function handleMenuClick({ key }: { key: string }) {
  if (key === 'Logout') {
    handleLogout();
  } else if (key === 'ChangeInformation') {
    window.open('/Views/Home/userSet.html', '_blank');
  }
}

function handleLogout() {
  Modal.confirm({
    title: $t('auth.logOut.title'),
    content: $t('auth.logOut.value'),
    okText: $t('btn.yes'),
    okType: 'danger',
    cancelText: $t('btn.no'),
    onOk() {
      userStore.setUserInfo(null);
      accessStore.setAccessToken(null);
      localStorage.removeItem('token_a');
      router.push('/');
      message.success($t('auth.logOutOK'));
    },
    onCancel() {},
  });
}

function handleClick(path: string) {
  window.open(path, '_blank');
}

function handleHome() {
  router.push('/');
}

watch(
  () => isLogin.value,
  (newValue) => {
    menuList.value = newValue
      ? [
          { key: 'Logout', label: $t('auth.logout') },
          { key: 'ChangeInformation', label: $t('auth.changeInformation') },
        ]
      : [];
  },
  { immediate: true },
);
</script>

<template>
  <div class="mb-[32px] flex items-center justify-between">
    <img
      :src="Logo"
      alt="logo"
      class="logo"
      height="30px"
      width="138px"
      @click="handleHome"
    />
    <ul class="menu flex gap-[60px] text-xs">
      <li
        v-for="menuItem in menus"
        :key="menuItem.title"
        class="flex items-center gap-2"
        @click="handleClick(menuItem.path)"
      >
        <span>{{ menuItem.title }}</span>
        <SvgArrowRightIcon class="arrow size-2" />
      </li>
    </ul>
    <div class="flex gap-2">
      <SelectLang />
      <Dropdown
        v-if="isLogin"
        :menu="{
          items: menuList,
        }"
        placement="bottom"
        @menu-click="(info: any) => handleMenuClick(info)"
      >
        <img
          v-if="userStore.userInfo?.avatar"
          :src="`/File/Download?fileId=${userStore.userInfo?.avatar}`"
          class="cursor-pointer"
          @click="openLogin"
        />
        <img
          v-else
          :avatar="useAvatar"
          class="cursor-pointer"
          @click="openLogin"
        />
      </Dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  cursor: pointer;
}

.menu li {
  color: #462424;
  cursor: pointer;

  &:hover {
    color: #7a003d;

    :deep(path) {
      fill: #7a003d;
    }
  }
}

.cursor-pointer {
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: none;
  border-color: transparent;
  border-radius: 50%;
}
</style>