shop-back/src/layout/header.vue

<template>
  <a-layout-header class="header-layout">
    <div class="content-layout">
      <div class="content-layout-left">
        <h2>
          <a :href="mainURL"><img :src="logoPng" /></a>
        </h2>
        <div class="main_menu">
          <router-link to="/" v-slot="{ isActive }">
            <span :class="{ active: isActive }">{{ t('room.myRoom') }}</span>
          </router-link>
          <router-link to="/statistic" v-slot="{ isActive }">
            <span :class="{ active: isActive }">{{ t('room.dashboard') }}</span>
          </router-link>
        </div>
      </div>

      <div class="right_menu_container">
        <a-dropdown placement="bottomRight">
          <template #overlay>
            <a-menu style="width: 100px" @click="handlerLangClick">
              <a-menu-item
                v-for="menu in langList"
                :key="menu.key"
                class="menu-item lang-item"
                :class="{ [menu.key]: true }"
              >
                <img style="height: 10px" :src="menu.icon" />

                {{ menu.label }}
              </a-menu-item>
            </a-menu>
          </template>
          <div class="avatar" style="margin-right: 30px">
            <img style="height: 14px" :src="getImgSrc(currentLang.key)" />
            <span>
              {{ currentLang.label }}
            </span>
          </div>
        </a-dropdown>

        <a-dropdown placement="bottomRight">
          <template #overlay>
            <a-menu
              :style="{
                width: isEn ? '140px' : '100px'
              }"
              @click="handlerMenuClick"
            >
              <a-menu-item
                v-for="menu in menus"
                :key="menu.key"
                class="menu-item"
                :class="{ [menu.key]: true }"
              >
                {{ t(menu.label) }}
              </a-menu-item>
            </a-menu>
          </template>
          <div class="avatar">
            <a-avatar :size="32">
              <template #icon>
                <img :src="userStore.current.avatar" />
              </template>
            </a-avatar>
            <span>
              {{ userStore.current.nickname }}
              <DownOutlined />
            </span>
          </div>
        </a-dropdown>
      </div>
    </div>
  </a-layout-header>
</template>

<script lang="ts" setup>
import { MenuProps } from 'ant-design-vue'
import { useUserStore } from '@/store/modules/user'
import { postLogout } from '@/api'
import { mainURL } from '@/env'
// import logoPng from '@/assets/images/logo.png'
import { useLocaleStore } from '@/store/modules/locale'
import { useI18n } from '@/hook/useI18n'
import { useLocale } from '@/locales/useLocale'
import { computed, onMounted, ref, unref, watch } from 'vue'
import { LocaleType } from '#/config'
import { showLoading } from '@/components/loading'
import { getImgSrc } from '@/utils/getImgSrc'
import browser from '@/utils/browser'

defineOptions({ name: 'LayoutHeader' })

const userStore = useUserStore()

userStore.fetch()
const { localInfo, getLocale } = useLocaleStore()

const { t } = useI18n()
const currentLang = ref({
  key: getLocale,
  label: t(`base.lang.${unref(getLocale)}`)
})

const logoPng = computed(() => getImgSrc(`logo_${unref(currentLang).key}`))

// const currentLang = computed(() => {
//   return {
//     key: getLocale,
//     label: t(`base.lang.${unref(getLocale)}`)
//   }
// })
const isEn = computed(() => unref(currentLang).key === 'en')
// console.log('getImgSrc', getImgSrc)
const langList = localInfo.availableLocales.map((item: string) => {
  return {
    key: item,
    label: t(`base.lang.${item}`),
    icon: getImgSrc(item)
  }
})

console.log('langList', langList)

const menus = [
  { label: 'base.personalCenter', key: 'user' },
  { label: 'base.userGuideline', key: 'guideLine' },
  { label: 'base.logout', key: 'logout' }
]
const handlerMenuClick: MenuProps['onClick'] = async e => {
  switch (true) {
    case e.key === 'logout':
      await postLogout()
      location.replace(`${mainURL}/?lang=${currentLang.value.key}`)
      break
    case e.key === 'user':
      location.href = `${mainURL}/#/information?lang=${currentLang.value.key}`
      break
    case e.key === 'guideLine':
      window.open('https://docs.4dkankan.com/#/product/livestream/zh-cn/README', '_blank');
      break
  }
}

const handlerLangClick: MenuProps['onClick'] = async e => {
  console.log(e.key)
  showLoading()
  const searchParam = new URLSearchParams(location.search)
  searchParam.set('lang', `${e.key}`)
  const { changeLocale } = useLocale()
  changeLocale(e.key as LocaleType)
  console.log('searchParam', searchParam.toString())
  const replaceUrl =
    location.origin + location.pathname + '?' + searchParam.toString()
  history.replaceState(null, '', replaceUrl)
  setTimeout(() => {
    location.reload()
  }, 300)
}

onMounted(() => {
  const handleChangeLocale = (lang: LocaleType) => {
    const { changeLocale } = useLocale()
    changeLocale(lang)
  }
  const setCurrentLang = (lang: LocaleType) => {
    currentLang.value.key = lang
    currentLang.value.label = t(`base.lang.${unref(lang)}`)
  }
  const lang = browser.getURLParam('lang')
  let defaultLang: LocaleType = 'zh'
  console.log('lang', lang)

  if (lang) {
    defaultLang = lang as LocaleType
    handleChangeLocale(lang as LocaleType)
  } else {
    defaultLang = 'zh'
    handleChangeLocale('zh')
  }
  setCurrentLang(defaultLang)
})
</script>
<style lang="scss">
.menu-item {
  text-align: center;
  &.logout {
    color: #fa7c7c;
  }
}
.lang-item {
  text-align: left;
  vertical-align: middle;
}
</style>

<style lang="scss" scoped>
.header-layout {
  background-color: #fff;
  display: flex;
  padding: 0;

  h2 {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 130px;
    }
  }
}
.right_menu_container {
  display: flex;
  flex-direction: row;
}

.content-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
  > span {
    margin-left: 8px;
  }
}
.content-layout-left {
  display: flex;
  flex-direction: row;
  // justify-content: center;
  align-items: center;
}
.main_menu {
  margin-left: 20px;
  a {
    text-decoration: none;
    color: #323233;
    font-size: 16px;
    margin: 0 25px;
  }
  span.active {
    color: #0076f6;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 4px;
      background: #0076f6;
      top: 120%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>