feat: 微客宝H5客户端 - 基础架构+核心页面

client/src/views/layout/TabLayout.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const tabMap = { home: 'home', grow: 'grow', meal: 'meal', my: 'my' }
+const active = ref(route.name?.toLowerCase() || 'home')
+
+watch(() => route.name, (n) => {
+  if (n && tabMap[n.toLowerCase()]) active.value = n.toLowerCase()
+})
+
+function onChange(val) {
+  router.push({ name: val.charAt(0).toUpperCase() + val.slice(1) })
+}
+</script>
+
+<template>
+  <div class="layout-wrap">
+    <router-view />
+    <van-tabbar v-model="active" @change="onChange" active-color="#e8718d" fixed safe-area-inset-bottom>
+      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
+      <van-tabbar-item name="grow" icon="friends-o">共伴成长</van-tabbar-item>
+      <van-tabbar-item name="meal" icon="restaurant-o">用膳</van-tabbar-item>
+      <van-tabbar-item name="my" icon="contact-o">我的</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<style scoped>
+.layout-wrap {
+  min-height: 100vh;
+  padding-bottom: 50px;
+}
+</style>