feat: Layout 布局

src/App.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import Layout from "@/layout/index.vue"
+</script>
+
 <template>
-  <router-view />
+  <Layout />
 </template>

src/layout/components/NavBar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const title = computed(() => route.meta.title)
+
+const showLeftArrow = computed(() => route.meta.layout?.navBar?.showLeftArrow)
+
+function onClickLeft() {
+  history.back()
+}
+</script>
+
+<template>
+  <van-nav-bar
+    :title="title"
+    :left-arrow="showLeftArrow"
+    @click-left="onClickLeft"
+    safe-area-inset-top placeholder fixed
+  />
+</template>

src/layout/components/Tabbar.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const router = useRouter()
+
+const tabbarItemList = computed(() => {
+  const routes = router.getRoutes()
+  return routes.filter(route => route.meta.layout?.tabbar?.showTabbar).map(route => ({
+    title: route.meta.title,
+    icon: route.meta.layout?.tabbar?.icon,
+    path: route.path
+  }))
+})
+</script>
+
+<template>
+  <van-tabbar placeholder route safe-area-inset-bottom fixed>
+    <van-tabbar-item
+      v-for="item in tabbarItemList"
+      :key="item.path"
+      :icon="item.icon"
+      :to="item.path"
+      replace
+    >
+      {{ item.title }}
+    </van-tabbar-item>
+  </van-tabbar>
+</template>

src/layout/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import NavBar from "./components/NavBar.vue"
+import Tabbar from "./components/Tabbar.vue"
+
+const route = useRoute()
+
+const showNavBar = computed(() => route.meta.layout?.navBar?.showNavBar)
+
+const showTabbar = computed(() => route.meta.layout?.tabbar?.showTabbar)
+</script>
+
+<template>
+  <NavBar v-if="showNavBar" />
+  <router-view overflow-y-auto />
+  <Tabbar v-if="showTabbar" />
+</template>
+
+<style scoped></style>

src/router/index.ts

@@ -12,7 +12,17 @@ export const routes: RouteRecordRaw[] = [
     component: () => import("@/pages/index.vue"),
     name: "Index",
     meta: {
-      title: "首页"
+      title: "首页",
+      layout: {
+        navBar: {
+          showNavBar: true,
+          showLeftArrow: false
+        },
+        tabbar: {
+          showTabbar: true,
+          icon: "home-o"
+        }
+      }
     }
   }
 ]

types/auto/components.d.ts

@@ -9,5 +9,9 @@ declare module 'vue' {
   export interface GlobalComponents {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanNavBar: typeof import('vant/es')['NavBar']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
   }
 }

types/vue-router.d.ts

@@ -4,6 +4,40 @@ export {}
 
 declare module "vue-router" {
   interface RouteMeta {
+    /**
+     * @description 页面标题
+     */
     title?: string
+    /**
+     * @description 布局配置
+     */
+    layout?: {
+      /**
+       * @description NavBar 配置
+       */
+      navBar?: {
+        /**
+         * @description 是否显示 NavBar
+         * @default false
+         */
+        showNavBar?: boolean
+        /**
+         * @description 是否显示左侧箭头
+         * @default false
+         */
+        showLeftArrow?: boolean
+      }
+      tabbar?: {
+        /**
+         * @description 是否显示 Tabbar
+         * @default false
+         */
+        showTabbar?: boolean
+        /**
+         * @description 图标
+         */
+        icon?: string
+      }
+    }
   }
 }