Merge pull request #58 from chengpeiquan/develop

Update Header on mobile.

src/components/Header.vue

@@ -18,7 +18,7 @@
     <!-- 站点导航 - 移动端 -->
     <nav
       v-if="isMobile"
-      class="nav flex flex-1 justify-end items-center text-xl"
+      class="nav flex flex-1 justify-end items-center text-base"
     >
       <!-- 主导航按钮 -->
       <a class="select-none mr-4" @click="toggleMenu">
@@ -37,7 +37,7 @@
         <li
           v-for="(item, index) in navList"
           :key="index"
-          class="flex items-center w-1/3 h-10 text-sm"
+          class="flex items-center w-1/3 h-12 text-sm"
         >
           <router-link
             :to="item.target"
@@ -103,7 +103,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import isDark from '/@libs/isDark'
 import isMobile from '/@libs/isMobile'
 
@@ -127,11 +128,17 @@ const navList: NavList = [
   }
 ];
 
+// 移动端菜单开关
 const isShowMenu = ref<boolean>(false);
-
 const toggleMenu = (): void => {
   isShowMenu.value = !isShowMenu.value;
 }
+
+// 移动端切换路由后关闭菜单
+const router = useRouter();
+router.afterEach( () => {
+  isShowMenu.value = false;
+})
 </script>
 
 <style lang="postcss" scoped>

src/components/ToggleTheme.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    class="select-none text-xl"
+    class="select-none md:text-xl text-base"
     :title="`切换到${ isDark ? '普通' : '暗黑' }模式`"
     @click="toggleTheme"
   >