feat: Add Tabbar component (#81)

Author: cwandev

src/auto-imports.d.ts

@@ -35,7 +35,6 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const defineLoader: typeof import('vue-router/auto')['defineLoader']
   const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const describe: typeof import('vitest')['describe']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']

src/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     NavBar: typeof import('./components/NavBar.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TabBar: typeof import('./components/TabBar.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
@@ -24,5 +25,7 @@ declare module 'vue' {
     VanRadio: typeof import('vant/es')['Radio']
     VanSpace: typeof import('vant/es')['Space']
     VanSwitch: typeof import('vant/es')['Switch']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
   }
 }

src/components/TabBar.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const active = ref(0)
+</script>
+
+<template>
+  <van-tabbar v-model="active" route>
+    <van-tabbar-item replace icon="home-o" to="/">
+      {{ t('layouts.home') }}
+    </van-tabbar-item>
+    <van-tabbar-item replace icon="user-circle-o" to="/profile">
+      {{ t('layouts.profile') }}
+    </van-tabbar-item>
+  </van-tabbar>
+</template>

src/layouts/default.vue

@@ -1,9 +1,13 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
 <template>
   <main p="16" text="gray-700 dark:gray-200">
     <RouterView />
 
     <div mx-auto mb-60 pt-15 text-center text-10 text-gray-500>
-      [Default Layout]
+      [{{ t('layouts.defaultLayout') }}]
     </div>
   </main>
 </template>

src/layouts/home.vue

@@ -1,9 +1,15 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
 <template>
   <main text="gray-700 dark:gray-200">
     <RouterView />
 
     <div mx-auto mt-15 text-center text-10 text-gray-500>
-      [Home Layout]
+      [{{ t('layouts.homeLayout') }}]
     </div>
+
+    <TabBar />
   </main>
 </template>

src/locales/en-US.json

@@ -21,5 +21,14 @@
     "April": "Apr",
     "May": "May",
     "June": "Jun"
+  },
+  "layouts": {
+    "home": "HOME",
+    "profile": "PROFILE",
+    "homeLayout": "Home Layout",
+    "defaultLayout": "Default Layout"
+  },
+  "profile": {
+    "placeholder": "WIP"
   }
 }

src/locales/zh-CN.json

@@ -21,5 +21,14 @@
     "April": "4月",
     "May": "5月",
     "June": "6月"
+  },
+  "layouts": {
+    "home": "首页",
+    "profile": "我的",
+    "homeLayout": "首页布局",
+    "defaultLayout": "默认布局"
+  },
+  "profile": {
+    "placeholder": "未完成"
   }
 }

src/pages/index.vue

@@ -4,7 +4,7 @@ import useAppStore from '@/stores/modules/app'
 import { languageColumns, locale } from '@/utils/i18n'
 
 definePage({
-  name: 'main',
+  name: 'home',
   meta: {
     level: 1,
   },

src/pages/profile/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+definePage({
+  name: 'profile',
+  meta: {
+    level: 1,
+  },
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div mx-auto mb-60 pt-15 text-center text-16 text-dark dark:text-white>
+    {{ t('profile.placeholder') }}
+  </div>
+</template>
+
+<route lang="yaml">
+  meta:
+    layout: home
+</route>

src/styles/app.less

@@ -25,8 +25,7 @@ body {
 }
 
 ::-webkit-scrollbar {
-  /** Don't remove this line **/
-  width: 1px;
+  width: 0;
   background: transparent;
 }
 
@@ -48,4 +47,3 @@ body {
   transform: translateX(-20px);
   opacity: 0;
 }
-