Fixed mobile menu is not adapted to the new menu i18n setup (#36)

src/components/MobileMenu.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="flex flex-col justify-center items-center">
     <img
-      v-if="themeConfig.site.avatar !== '' || themeConfig.site.logo !== ''"
+      v-if="authorData.avatar !== ''"
       class="diamond-avatar h-28 w-28 shadow-xl m-0"
-      :src="themeConfig.site.avatar || themeConfig.site.logo"
+      :src="authorData.avatar || authorData.logo"
       alt="avatar"
     />
     <ob-skeleton v-else width="7rem" height="7rem" circle />
 
     <h2 class="text-center pt-4 text-4xl font-semibold text-ob-bright">
-      <template v-if="themeConfig.site.author">
-        {{ themeConfig.site.author }}
+      <template v-if="authorData.name">
+        {{ authorData.name }}
       </template>
       <ob-skeleton v-else height="2.25rem" width="7rem" />
     </h2>
 
     <span class="h-1 w-14 rounded-full mt-2" :style="gradientBackground" />
 
     <p
-      v-if="themeConfig.site.description"
+      v-if="authorData.description"
       class="pt-6 px-2 w-full text-sm text-center text-ob-dim"
-      v-html="themeConfig.site.description"
+      v-html="authorData.description"
     />
     <p v-else class="pt-6 px-10 w-full text-sm text-center flex flex-col gap-2">
       <ob-skeleton :count="2" height="20px" width="10rem" />
@@ -29,61 +29,86 @@
     <ul
       class="flex flex-row justify-evenly flex-wrap w-full py-4 px-2 text-center items-center"
     >
-      <li class="diamond-clip-path diamond-icon" v-if="socials.github">
-        <a :href="socials.github" target="_blank" ref="github">
+      <li
+        class="diamond-clip-path diamond-icon"
+        v-if="authorData.socials.github"
+      >
+        <a :href="authorData.socials.github" target="_blank" ref="github">
           <svg-icon icon-class="github" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.twitter">
-        <a :href="socials.twitter" target="_blank" ref="twitter">
+      <li
+        class="diamond-clip-path diamond-icon"
+        v-if="authorData.socials.twitter"
+      >
+        <a :href="authorData.socials.twitter" target="_blank" ref="twitter">
           <svg-icon icon-class="twitter" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.stackoverflow">
-        <a :href="socials.stackoverflow" target="_blank" ref="stackoverflow">
+      <li
+        class="diamond-clip-path diamond-icon"
+        v-if="authorData.socials.stackoverflow"
+      >
+        <a
+          :href="authorData.socials.stackoverflow"
+          target="_blank"
+          ref="stackoverflow"
+        >
           <svg-icon icon-class="stackoverflow" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.wechat">
-        <a :href="socials.wechat" target="_blank" ref="wechat">
+      <li
+        class="diamond-clip-path diamond-icon"
+        v-if="authorData.socials.wechat"
+      >
+        <a :href="authorData.socials.wechat" target="_blank" ref="wechat">
           <svg-icon icon-class="wechat" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.qq">
-        <a :href="socials.qq" target="_blank" ref="qq">
+      <li class="diamond-clip-path diamond-icon" v-if="authorData.socials.qq">
+        <a :href="authorData.socials.qq" target="_blank" ref="qq">
           <svg-icon icon-class="qq" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.weibo">
-        <a :href="socials.weibo" target="_blank" ref="weibo">
+      <li
+        class="diamond-clip-path diamond-icon"
+        v-if="authorData.socials.weibo"
+      >
+        <a :href="authorData.socials.weibo" target="_blank" ref="weibo">
           <svg-icon icon-class="weibo" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.csdn">
-        <a :href="socials.csdn" target="_blank" ref="csdn">
+      <li class="diamond-clip-path diamond-icon" v-if="authorData.socials.csdn">
+        <a :href="authorData.socials.csdn" target="_blank" ref="csdn">
           <svg-icon icon-class="csdn" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.zhifu">
-        <a :href="socials.zhifu" target="_blank" ref="zhifu">
+      <li
+        class="diamond-clip-path diamond-icon"
+        v-if="authorData.socials.zhifu"
+      >
+        <a :href="authorData.socials.zhifu" target="_blank" ref="zhifu">
           <svg-icon icon-class="zhifu" class="fill-current" />
         </a>
       </li>
-      <li class="diamond-clip-path diamond-icon" v-if="socials.juejin">
-        <a :href="socials.juejin" target="_blank" ref="juejin">掘</a>
+      <li
+        class="diamond-clip-path diamond-icon"
+        v-if="authorData.socials.juejin"
+      >
+        <a :href="authorData.socials.juejin" target="_blank" ref="juejin">掘</a>
       </li>
     </ul>
     <ul class="grid grid-cols-3 pt-4 w-full px-2 text-lg">
       <li class="col-span-1 text-center">
-        <span class="text-ob-bright">{{ statistic.posts }}</span>
+        <span class="text-ob-bright">{{ authorData.post_list.length }}</span>
         <p class="text-base text-ob-dim">{{ t('settings.articles') }}</p>
       </li>
       <li class="col-span-1 text-center">
-        <span class="text-ob-bright">{{ statistic.categories }}</span>
+        <span class="text-ob-bright">{{ authorData.categories }}</span>
         <p class="text-base text-ob-dim">{{ t('settings.categories') }}</p>
       </li>
       <li class="col-span-1 text-center">
-        <span class="text-ob-bright">{{ statistic.tags }}</span>
+        <span class="text-ob-bright">{{ authorData.tags }}</span>
         <p class="text-base text-ob-dim">{{ t('settings.tags') }}</p>
       </li>
     </ul>
@@ -97,8 +122,17 @@
         @click="pushPage(route.path)"
         v-if="route.children && route.children.length === 0"
       >
-        <span class="relative z-50" v-if="route.i18n">
-          {{ t(`menu.${route.i18n}`) }}
+        <span
+          class="relative z-50"
+          v-if="$i18n.locale === 'cn' && route.i18n.cn"
+        >
+          {{ route.i18n.cn }}
+        </span>
+        <span
+          class="relative z-50"
+          v-else-if="$i18n.locale === 'en' && route.i18n.en"
+        >
+          {{ route.i18n.en }}
         </span>
         <span class="relative z-50" v-else> {{ route.name }} </span>
       </div>
@@ -107,8 +141,17 @@
         v-else
         class="flex flex-col justify-center items-center nav-link text-sm block px-1.5 py-0.5 rounded-md relative uppercase"
       >
-        <span class="relative z-50" v-if="route.i18n">
-          {{ t(`menu.${route.i18n}`) }}
+        <span
+          class="relative z-50"
+          v-if="$i18n.locale === 'cn' && route.i18n.cn"
+        >
+          {{ route.i18n.cn }}
+        </span>
+        <span
+          class="relative z-50"
+          v-else-if="$i18n.locale === 'en' && route.i18n.en"
+        >
+          {{ route.i18n.en }}
         </span>
         <span class="relative z-50" v-else> {{ route.name }} </span>
         <DropdownMenu expand>
@@ -117,8 +160,17 @@
             :key="sub.path"
             :name="sub.path"
           >
-            <span class="relative z-50" v-if="sub.i18n">
-              {{ t(`menu.${sub.i18n}`) }}
+            <span
+              class="relative z-50"
+              v-if="$i18n.locale === 'cn' && sub.i18n.cn"
+            >
+              {{ sub.i18n.cn }}
+            </span>
+            <span
+              class="relative z-50"
+              v-else-if="$i18n.locale === 'en' && sub.i18n.en"
+            >
+              {{ sub.i18n.en }}
             </span>
             <span class="relative z-50" v-else> {{ sub.name }} </span>
           </DropdownItem>
@@ -129,24 +181,31 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import { Dropdown, DropdownMenu, DropdownItem } from '@/components/Dropdown'
 import { useRouter } from 'vue-router'
 import { useNavigatorStore } from '@/stores/navigator'
+import { useAuthorStore } from '@/stores/author'
+import { AuthorPosts } from '@/models/Post.class'
 
 export default defineComponent({
   name: 'ObMobileMenu',
   components: { Dropdown, DropdownMenu, DropdownItem },
   setup() {
     const appStore = useAppStore()
+    const authorStore = useAuthorStore()
     const router = useRouter()
     const navigatorStore = useNavigatorStore()
     const { t } = useI18n()
 
-    const fetchData = async () => {
-      await appStore.fetchStat()
+    const authorData = ref(new AuthorPosts())
+
+    const fetchAuthor = async () => {
+      await authorStore.fetchAuthorData('blog-author').then((data) => {
+        authorData.value = data
+      })
     }
 
     const pushPage = (path: string): void => {
@@ -162,18 +221,16 @@ export default defineComponent({
       }
     }
 
-    onMounted(fetchData)
+    onMounted(fetchAuthor)
 
     return {
       themeConfig: computed(() => appStore.themeConfig),
       gradientBackground: computed(() => {
         return { background: appStore.themeConfig.theme.header_gradient_css }
       }),
-      socials: computed(() => {
-        return appStore.themeConfig.socials
-      }),
       statistic: computed(() => appStore.statistic),
       routes: computed(() => appStore.themeConfig.menu.menus),
+      authorData,
       pushPage,
       t
     }