新版本官网优化完成

components/MHeader.vue

@@ -0,0 +1,150 @@
+<template>
+
+    <header class="clearfix flex justify-between items-center w-full">
+      <div class="logo" :class="logo?.style">
+        <nuxt-link :to="`/m`" target="_top"><img :src="`${logo?.value }`" /></nuxt-link>
+      </div>
+      <div class="sub-menu">
+        <el-icon color="black" :size="20" @click="drawer = true"><Fold /></el-icon>
+      </div>
+    </header>
+
+  <el-drawer
+      v-model="drawer"
+      :size="290"
+  >
+    <div id="menu">
+      <el-menu
+          currentIndex="/product"
+          :unique-opened="true"
+      >
+        <template v-for="(item,index) in navigations" :key="index">
+        <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
+          <template #title><span>{{ item.title }}</span></template>
+          <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
+            <el-space>
+              <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
+              <a :href="navTo(sub)">{{ sub.title }}</a>
+            </el-space>
+          </el-menu-item>
+        </el-sub-menu>
+        <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
+        </template>
+      </el-menu>
+      <div class="search-tools flex justify-center p-4 mt-5">
+        <el-input v-model="keyword" placeholder="请输入关键词..." :suffix-icon="Search" @change="onSearch"/>
+      </div>
+      <div class="lang flex justify-center text-center" v-if="langList.length > 0">
+        <el-space>
+          <a :href="`/m?spm=zh_CN`" class="text-sm text-gray-500">中文版</a>
+          <el-divider direction="vertical" />
+          <a :href="`/en/m?spm=en_US`" class="text-sm text-gray-400">English</a>
+        </el-space>
+      </div>
+    </div>
+  </el-drawer>
+
+</template>
+
+<script setup lang="ts">
+// 引入所需的图标
+import {
+  useConfigInfo,
+  useMenu,
+  useToken,
+  useUser, useWebsite
+} from "~/composables/configState";
+import {getPath, isMobileDevice, navTo} from "#imports";
+import { Search, Expand, Fold } from '@element-plus/icons-vue'
+import {configWebsiteField} from "~/api/cms/cmsWebsiteField";
+import {getSiteInfo, getUserInfo} from "~/api/layout";
+import {listCmsLangLog} from "~/api/cms/cmsLangLog";
+import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
+import type {CmsWebsiteField} from "~/api/cms/cmsWebsiteField/model";
+import {getWebsiteField} from "~/api/cms/cmsWebsiteField";
+
+const token = useToken();
+const user = useUser();
+const navigations = useMenu();
+const config = useConfigInfo();
+const i18n = useI18n();
+const isMobile = ref<boolean>(false);
+const langList = ref<CmsLangLog[]>([]);
+const drawer = ref<boolean>(false);
+const logo = ref<CmsWebsiteField>();
+const keyword = ref();
+
+const setNav = () => {
+  navigations.value = navigations.value.map(item => {
+    item.showChild = false
+    item.childHeight = 0;
+    return item
+  })
+}
+setNav()
+
+const onSearch = () => {
+  window.location.href = `/m/search/${keyword.value}`;
+}
+
+
+const reload = async () => {
+
+  // TODO 读取网站配置信息
+  configWebsiteField({
+    lang: i18n.locale.value
+  }).then(res => {
+    config.value = res;
+  })
+
+  // TODO 读取国际化配置
+  listCmsLangLog({}).then(list => {
+    langList.value = list;
+  })
+
+  // TODO 读取logo
+  getWebsiteField(13686).then(data => {
+    logo.value = data;
+  })
+
+  // TODO 是否跳转H5版
+  if(isMobileDevice()){
+    isMobile.value = true;
+    const path = getPath(1);
+    if(!path || !path.startsWith('/m')){
+      let newUrl = '';
+      let origin = window.location.origin;
+      let href = window.location.href;
+      let pathname = window.location.pathname;
+      if(pathname.startsWith('/m') || pathname.startsWith(`/${i18n.locale.value}/m`)){
+        return false;
+      }
+      newUrl = href.replace(origin,origin + '/m');
+      window.location.href = newUrl;
+    }
+  }
+
+  // 获取用户信息
+  // token.value = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJ1c2VybmFtZVwiOlwiMTM4MDAwMTAzMTdcIixcInRlbmFudElkXCI6MTAzMTd9IiwiZXhwIjoxNzM1Nzk2NjA1LCJpYXQiOjE3MzMyMDQ2MDV9.hx6OV4ZHe6XTnNye1gvsuXjoxHW0YihcEwSuppUcoCc'
+  // 获取用户信息
+  if (token.value) {
+    getUserInfo().then(data => {
+      user.value = data
+    })
+  }
+}
+
+onMounted(() => {
+  // 在这里放置你想要在组件渲染完成后执行的代码
+  reload();
+});
+</script>
+
+<style lang="scss">
+.el-menu{
+  border-right: none !important;
+}
+.el-menu-item, .el-sub-menu{
+  border-bottom: 1px solid #f3f3f3;
+}
+</style>