refactor: always display the navbar on the page

Author: cwandev

src/components/NavBar.vue

@@ -17,14 +17,22 @@ const title = computed(() => {
 
   return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
 })
+
+const showLeftArrow = computed(() => {
+  if (!route.meta)
+    return false
+
+  return route.meta.level === 2
+})
 </script>
 
 <template>
   <VanNavBar
-    v-if="title"
     :title="title"
     :fixed="true"
-    clickable left-arrow placeholder
+    clickable
+    placeholder
+    :left-arrow="showLeftArrow"
     @click-left="onBack"
   />
 </template>

src/components/TabBar.vue

@@ -3,15 +3,15 @@ const { t } = useI18n()
 const active = ref(0)
 const route = useRoute()
 
-const display = computed(() => {
+const show = computed(() => {
   if (route.meta.level && route.meta.level !== 2)
     return true
   return false
 })
 </script>
 
 <template>
-  <van-tabbar v-if="display" v-model="active" route placeholder>
+  <van-tabbar v-if="show" v-model="active" placeholder route>
     <van-tabbar-item replace to="/">
       {{ t('layouts.home') }}
       <template #icon>

src/locales/en-US.json

@@ -1,5 +1,7 @@
 {
-  "home": {
+  "menus": {
+    "home": "Home",
+    "profile": "My Center",
     "darkMode": "🌗 Dark Mode",
     "mockGuide": "💿 Mock Guide",
     "language": "📚 Language",

src/locales/zh-CN.json

@@ -1,5 +1,7 @@
 {
-  "home": {
+  "menus": {
+    "home": "主页",
+    "profile": "个人中心",
     "darkMode": "🌗 暗黑模式",
     "mockGuide": "💿 Mock 指南",
     "language": "📚 语言",

src/pages/[...all].vue

@@ -2,6 +2,8 @@
 definePage({
   name: '404',
   meta: {
+    title: '404',
+    i18n: 'menus.404Demo',
     level: 2,
   },
 })

src/pages/charts/index.vue

@@ -4,7 +4,7 @@ definePage({
   meta: {
     level: 2,
     title: '📊 Echarts 演示',
-    i18n: 'home.echartsDemo',
+    i18n: 'menus.echartsDemo',
   },
 })
 

src/pages/counter/index.vue

@@ -7,7 +7,7 @@ definePage({
   meta: {
     level: 2,
     title: '🍍 持久化 Pinia 状态',
-    i18n: 'home.persistPiniaState',
+    i18n: 'menus.persistPiniaState',
   },
 })
 

src/pages/index.vue

@@ -6,6 +6,8 @@ import { languageColumns, locale } from '@/utils/i18n'
 definePage({
   name: 'home',
   meta: {
+    title: '主页',
+    i18n: 'menus.home',
     level: 1,
   },
 })
@@ -38,27 +40,27 @@ function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
 }
 
 const menuItems = computed(() => ([
-  { title: t('home.mockGuide'), route: 'mock' },
-  { title: t('home.echartsDemo'), route: 'charts' },
-  { title: t('home.unocssExample'), route: 'unocss' },
-  { title: t('home.persistPiniaState'), route: 'counter' },
-  { title: t('home.404Demo'), route: 'unknown' },
-  { title: t('home.keepAlive'), route: 'keepalive' },
+  { title: t('menus.mockGuide'), route: 'mock' },
+  { title: t('menus.echartsDemo'), route: 'charts' },
+  { title: t('menus.unocssExample'), route: 'unocss' },
+  { title: t('menus.persistPiniaState'), route: 'counter' },
+  { title: t('menus.404Demo'), route: 'unknown' },
+  { title: t('menus.keepAlive'), route: 'keepalive' },
 ]))
 </script>
 
 <template>
-  <div class="pt-46">
+  <div class="pt-16">
     <VanCellGroup inset>
-      <VanCell center :title="t('home.darkMode')">
+      <VanCell center :title="t('menus.darkMode')">
         <template #right-icon>
           <VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
         </template>
       </VanCell>
 
       <VanCell
         is-link
-        :title="t('home.language')"
+        :title="t('menus.language')"
         :value="language"
         @click="showLanguagePicker = true"
       />

src/pages/keepalive/index.vue

@@ -8,7 +8,7 @@ definePage({
   meta: {
     level: 2,
     title: '🧡 KeepAlive',
-    i18n: 'home.keepAlive',
+    i18n: 'menus.keepAlive',
     keepAlive: true,
   },
 })

src/pages/mock/index.vue

@@ -6,7 +6,7 @@ definePage({
   meta: {
     level: 2,
     title: '💿 Mock 指南',
-    i18n: 'home.mockGuide',
+    i18n: 'menus.mockGuide',
   },
 })