From 0fe6e762051f3f290e568d7487b40696fb319de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=B6=85?= <chao.yu@chinaxpp.com>
Date: Mon, 7 Apr 2025 14:53:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AE=BD=E5=B1=8F?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=8Btabbar=E6=98=BE=E7=A4=BA=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=E8=B6=85=E5=AE=BD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.ts                  |  6 ++++
 postcss.config.ts                |  3 +-
 src/layout/components/Tabbar.vue | 48 +++++++++++++++++++++-----------
 src/layout/index.vue             |  2 +-
 tsconfig.json                    |  1 +
 types/auto/components.d.ts       |  8 ------
 vite.config.ts                   |  2 ++
 7 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 config/index.ts

diff --git a/config/index.ts b/config/index.ts
new file mode 100644
index 0000000..0a22c6c
--- /dev/null
+++ b/config/index.ts
@@ -0,0 +1,6 @@
+interface IConfig {
+  primaryWidth: number
+}
+export const config: IConfig = {
+  primaryWidth: 750
+}
diff --git a/postcss.config.ts b/postcss.config.ts
index ffe0dcb..a9d1134 100644
--- a/postcss.config.ts
+++ b/postcss.config.ts
@@ -1,3 +1,4 @@
+import { config } from "./config/index"
 // 修改配置后重启服务生效
 export default {
   plugins: {
@@ -8,7 +9,7 @@ export default {
       // UI 设计稿宽度
       viewportWidth: (file: string) => file.includes("vant") ? 375 : 375,
       // 限制视图的最大宽度
-      maxDisplayWidth: 750,
+      maxDisplayWidth: config.primaryWidth,
       // 页面最外层选择器
       appSelector: "#app",
       // 是否对「页面最外层选择器」对应的元素进行描边
diff --git a/src/layout/components/Tabbar.vue b/src/layout/components/Tabbar.vue
index f3c6493..222238b 100644
--- a/src/layout/components/Tabbar.vue
+++ b/src/layout/components/Tabbar.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-const router = useRouter()
+import { config } from "~/config/index"
 
+const router = useRouter()
+const root = ref<HTMLDivElement | null>(null)
 const tabbarItemList = computed(() => {
   const routes = router.getRoutes()
   return routes.filter(route => route.meta.layout?.tabbar?.showTabbar).map(route => ({
@@ -9,23 +11,37 @@ const tabbarItemList = computed(() => {
     path: route.path
   }))
 })
+onMounted(() => {
+  if (root.value) {
+    root.value?.style.setProperty("--primary-width", `${config.primaryWidth}px`)
+  }
+})
 </script>
 
 <template>
-  <van-tabbar
-    route
-    fixed
-    placeholder
-    safe-area-inset-bottom
-  >
-    <van-tabbar-item
-      v-for="item in tabbarItemList"
-      :key="item.path"
-      :icon="item.icon"
-      :to="item.path"
-      replace
+  <div ref="root">
+    <van-tabbar
+      class="ignore"
+      route
+      fixed
+      safe-area-inset-bottom
     >
-      {{ item.title }}
-    </van-tabbar-item>
-  </van-tabbar>
+      <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>
+  </div>
 </template>
+
+<style scoped>
+.ignore {
+  max-width: var(--primary-width);
+  overflow: hidden;
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index d552e42..6d55434 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -18,7 +18,7 @@ const showFooter = computed(() => route.meta.layout?.footer)
 <template>
   <div un-h-full un-flex un-flex-col>
     <NavBar v-if="showNavBar" />
-    <div un-flex-1 un-overflow-y-auto>
+    <div un-flex-1 un-overflow-y-auto class="pb-[var(--van-tabbar-height)]">
       <!-- key 采用 route.path 和 route.fullPath 有着不同的效果，大多数时候 path 更通用 -->
       <router-view v-slot="{ Component }">
         <keep-alive :include="keepAliveStore.cachedRoutes">
diff --git a/tsconfig.json b/tsconfig.json
index fcd278d..817a013 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
     // 非相对模块导入的路径映射配置，根据 baseUrl 配置进行路径计算，与 vite.config 中 alias 配置同步
     "paths": {
       "@/*": ["src/*"],
+      "~/*": ["*"],
       "@@/*": ["src/common/*"]
     },
     "resolveJsonModule": true,
diff --git a/types/auto/components.d.ts b/types/auto/components.d.ts
index 39f460c..26210f4 100644
--- a/types/auto/components.d.ts
+++ b/types/auto/components.d.ts
@@ -11,22 +11,14 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
-    VanCalendar: typeof import('vant/es')['Calendar']
-    VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanDivider: typeof import('vant/es')['Divider']
-    VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
-    VanImage: typeof import('vant/es')['Image']
     VanLoading: typeof import('vant/es')['Loading']
     VanNavBar: typeof import('vant/es')['NavBar']
-    VanNoticeBar: typeof import('vant/es')['NoticeBar']
-    VanRadio: typeof import('vant/es')['Radio']
-    VanRadioGroup: typeof import('vant/es')['RadioGroup']
-    VanSwitch: typeof import('vant/es')['Switch']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
   }
diff --git a/vite.config.ts b/vite.config.ts
index f356447..d210495 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,6 +21,8 @@ export default defineConfig(({ mode }) => {
       alias: {
         // @ 符号指向 src 目录
         "@": resolve(__dirname, "src"),
+        // ~ 符号指向根目录
+        "~": resolve(__dirname),
         // @@ 符号指向 src/common 通用目录
         "@@": resolve(__dirname, "src/common")
       }
-- 
Gitee