1

components/AppHeader/AppHeader.vue

@@ -0,0 +1,99 @@
+<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>