完成适配移动端

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>