100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
<template>
|
|
<!-- 头部组件 -->
|
|
<div class="sm:p-0 px-4 shadow-sm z-100 top-0 w-full bg-green-700">
|
|
<!-- 顶部通栏 -->
|
|
<TopBar />
|
|
<!-- 导航栏 -->
|
|
<div class="flex justify-between xl:w-screen-xl m-auto">
|
|
<Menu :data="navigations" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 引入所需的图标
|
|
import {
|
|
useConfigInfo,
|
|
useLogo,
|
|
useMenu,
|
|
useToken,
|
|
useUser
|
|
} from "~/composables/configState";
|
|
import {useI18n} from "#imports";
|
|
import Logo from "~/components/AppHeader/Logo/Logo.vue"
|
|
import {configWebsiteField, listCmsWebsiteField} from "~/api/cms/cmsWebsiteField";
|
|
import {getUserInfo} from "~/api/layout";
|
|
import Menu from "~/components/AppHeader/Menu/Menu.vue";
|
|
import TopBar from "~/components/AppHeader/TopBar/TopBar.vue";
|
|
import Login from "~/components/AppHeader/Login/Login.vue";
|
|
|
|
// 配置信息
|
|
const i18n = useI18n();
|
|
const config = useConfigInfo();
|
|
const logo = useLogo();
|
|
const token = useToken();
|
|
const user = useUser();
|
|
const navigations = useMenu();
|
|
|
|
const setNav = () => {
|
|
navigations.value = navigations.value.map(item => {
|
|
item.showChild = false
|
|
item.childHeight = 0;
|
|
return item
|
|
})
|
|
}
|
|
setNav()
|
|
|
|
// 切换语言
|
|
const changLang = () => {
|
|
const idBySpm = getIdBySpm(0);
|
|
if(idBySpm?.startsWith('zh_CN')){
|
|
i18n.setLocale('zh');
|
|
}else if (idBySpm?.startsWith('en_US')){
|
|
i18n.setLocale('en');
|
|
}
|
|
}
|
|
|
|
|
|
const reload = async () => {
|
|
|
|
// 切换语言
|
|
changLang();
|
|
|
|
// TODO 读取网站配置信息
|
|
configWebsiteField({
|
|
lang: i18n.locale.value
|
|
}).then(res => {
|
|
config.value = res;
|
|
if(res?.siteName){
|
|
localStorage.setItem('SiteName', res?.siteName)
|
|
}
|
|
})
|
|
|
|
// 读取全局配置
|
|
listCmsWebsiteField({
|
|
categoryId: 0
|
|
}).then(list => {
|
|
logo.value = list.find(item => item.name === 'siteLogo')
|
|
})
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
// 获取用户信息
|
|
if (token.value) {
|
|
getUserInfo().then(data => {
|
|
user.value = data
|
|
})
|
|
}
|
|
reload();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import 'assets/css/base.css';
|
|
@import 'assets/css/model.css';
|
|
//@import 'assets/css/main.css';
|
|
//@import 'assets/css/user.css';
|
|
//@import 'assets/css/index.css';
|
|
</style>
|