完成适配移动端

components/AppHeader/AppHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 头部组件 -->
-  <div class="shadow-sm fixed z-100 top-0 w-full bg-white bg-opacity-90">
+  <div class="sm:p-0 px-4 shadow-sm fixed z-100 top-0 w-full bg-white bg-opacity-90">
     <!-- 顶部通栏 -->
     <TopBar />
     <!-- 导航栏 -->

components/AppHeader/Login/Login.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="fr clearfix flex items-center">
-    <div v-if="setting.searchBtn" class="fl mr-5">
+    <!-- PC端 -->
+    <div v-if="setting.searchBtn" class="fl mr-5 hidden-sm-and-down">
       <el-input v-model="keywords" :placeholder="`${$t('searchKeywords')}`" :suffix-icon="Search" @change="onSearch"/>
     </div>
     <template v-if="setting.loginBtn">
       <!-- 未登录 -->
       <div v-if="!token" class="lang flex justify-center text-center items-center">
-        <el-space>
+        <el-space class="hidden-sm-and-down">
           <nuxt-link to="/passport/login?type=register" type="text" class="text-sm text-gray-500">注册</nuxt-link>
           <el-divider direction="vertical"/>
           <nuxt-link to="/passport/login" type="text" class="text-sm text-gray-500">登录</nuxt-link>
@@ -43,16 +44,62 @@
           </el-space>
         </div>
       </div>
+      <!-- 移动端 -->
+      <div class="hidden-sm-and-up mx-7 sm:mx-0">
+        <div class="el-dropdown-link flex items-center" @click="drawer = true">
+          <el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
+          <el-icon v-else color="black" :size="24"><Fold /></el-icon>
+        </div>
+        <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 v-if="setting.searchBtn" class="search-tools flex justify-center p-4 mt-5">-->
+<!--              <el-input v-model="keywords" placeholder="请输入关键词..." :suffix-icon="Search" @change="onSearch"/>-->
+<!--            </div>-->
+<!--            <div v-if="setting.langBtn" class="lang flex justify-center text-center">-->
+<!--              <el-space>-->
+<!--                <a @click="onLang(`zh`)" class="text-sm text-gray-500">中文版</a>-->
+<!--                <el-divider direction="vertical" />-->
+<!--                <a @click="onLang(`en`)" class="text-sm text-gray-400">English</a>-->
+<!--              </el-space>-->
+<!--            </div>-->
+          </div>
+        </el-drawer>
+      </div>
     </template>
   </div>
 </template>
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
-import {useConfigInfo, useSetting} from "~/composables/configState";
+import { Search, Fold } from '@element-plus/icons-vue'
+import {useConfigInfo, useMenu, useSetting} from "~/composables/configState";
+import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
+import {listCmsLangLog} from "~/api/cms/cmsLangLog";
 const token = useToken();
 const user = useUser();
+const navigations = useMenu();
 const setting = useSetting();
 const keywords = ref<string>();
+const drawer = ref<boolean>(false);
+const langList = ref<CmsLangLog[]>([]);
 
 const onSearch = () => {
   navigateTo(`/search/${keywords.value || '关键词不能为空！'}`)
@@ -69,6 +116,16 @@ function handleCommand(command: string) {
   }
 }
 
+// TODO 读取国际化配置
+listCmsLangLog({}).then(list => {
+  langList.value = list;
+})
+
+const onLang = (lang: string) => {
+  navigateTo(`?lang=${lang}`)
+  drawer.value = false;
+}
+
 function logOut() {
   token.value = '';
   localStorage.clear();
@@ -76,5 +133,7 @@ function logOut() {
 }
 </script>
 <style scoped lang="scss">
-
+.el-menu{
+  border-right: none;
+}
 </style>

components/AppHeader/Logo/Logo.vue

@@ -1,6 +1,6 @@
 <template>
   <nuxt-link to="/" class="flex items-center cursor-pointer gap-sm mr-7" v-if="website">
-    <el-image v-if="website.websiteLogo || logo?.value" :style="`${logo?.style}`" :src="logo?.value || website?.websiteLogo" class=" rounded-sm rounded-sm w-[107px] h-[24px]"/>
+    <el-image v-if="website.websiteLogo || logo?.value" :style="`${logo?.style}`" :src="logo?.value || website?.websiteLogo" class="rounded-sm rounded-sm w-[107px] h-[24px] py-3 sm:py-0"/>
     <h4 v-else class="text-gray-700 text-xl font-bold" :style="`${logo?.style}`">{{ website?.websiteName }}</h4>
   </nuxt-link>
 </template>

components/AppHeader/Menu/Menu.vue

@@ -1,26 +1,7 @@
-<script setup lang="ts">
-import {navigateTo} from "#imports";
-
-const navigations = useMenu();
-import {useMenu} from "~/composables/configState";
-const handleSelect = (index: any,keyPath: string[]) => {
-  const split = index.split('-');
-  if(split.length == 1){
-    const item = navigations.value[index];
-    navigateTo(item)
-  }
-  if(split.length == 2){
-    const item = navigations.value[split[0]];
-    if(item.children){
-      const child = item.children[split[1]];
-      navigateTo(child.path)
-    }
-  }
-}
-</script>
-
 <template>
+  <!-- PC版菜单 -->
   <el-menu
+      class="hidden-sm-and-down"
       mode="horizontal"
       style="background-color: transparent;"
       active-text-color="#1b850c"
@@ -54,7 +35,27 @@ const handleSelect = (index: any,keyPath: string[]) => {
     </template>
   </el-menu>
 </template>
+<script setup lang="ts">
+import {navigateTo} from "#imports";
+import {useMenu} from "~/composables/configState";
 
+const navigations = useMenu();
+
+const handleSelect = (index: any,keyPath: string[]) => {
+  const split = index.split('-');
+  if(split.length == 1){
+    const item = navigations.value[index];
+    navigateTo(item)
+  }
+  if(split.length == 2){
+    const item = navigations.value[split[0]];
+    if(item.children){
+      const child = item.children[split[1]];
+      navigateTo(child.path)
+    }
+  }
+}
+</script>
 <style scoped lang="scss">
 .el-menu--horizontal > .el-menu-item:nth-child(1) {
   margin-right: auto;