From a3c910f0d26728bc34dbeeacbca51f58df4adb97 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Mon, 4 Aug 2025 16:21:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor(tabbar):=20=E8=B0=83=E6=95=B4=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=87=E7=AD=BE=E6=A0=8F=E7=9A=84=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E7=BB=93=E6=9E=84=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将外层flex布局改为嵌套结构
- 统一图标大小为20px
- 添加文本上边距和背景色
- 调整底部安全区域样式
---
 src/tabbar/index.vue | 50 +++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue
index 4deffbe..03b9779 100644
--- a/src/tabbar/index.vue
+++ b/src/tabbar/index.vue
@@ -46,32 +46,34 @@ function getColorByIndex(index: number) {
 </script>
 
 <template>
-  <view v-if="customTabbarEnable" class="flex items-center justify-between">
-    <view class="__content__ border-and-fixed h-50px flex" @touchmove.stop.prevent>
-      <view
-        v-for="(item, index) in tabbarList" :key="index"
-        class="flex flex-1 flex-col items-center justify-center"
-        :style="{ color: getColorByIndex(index) }"
-        @click="handleClick(index)"
-      >
-        <template v-if="item.iconType === 'uniUi'">
-          <uni-icons :type="item.icon" size="20" :color="getColorByIndex(index)" />
-        </template>
-        <template v-if="item.iconType === 'uiLib'">
-          <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
-          <!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
-          <!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
-          <!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
-          <wd-icon :name="item.icon" />
-        </template>
-        <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
-          <view :class="item.icon" />
-        </template>
-        <view class="text-12px">
-          {{ item.text }}
+  <view v-if="customTabbarEnable">
+    <view class="__content__ border-and-fixed bg-white" @touchmove.stop.prevent>
+      <view class="h-50px flex items-center">
+        <view
+          v-for="(item, index) in tabbarList" :key="index"
+          class="flex flex-1 flex-col items-center justify-center"
+          :style="{ color: getColorByIndex(index) }"
+          @click="handleClick(index)"
+        >
+          <template v-if="item.iconType === 'uniUi'">
+            <uni-icons :type="item.icon" size="20" :color="getColorByIndex(index)" />
+          </template>
+          <template v-if="item.iconType === 'uiLib'">
+            <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
+            <!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
+            <!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
+            <!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
+            <wd-icon :name="item.icon" size="20" />
+          </template>
+          <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
+            <view :class="item.icon" class="text-20px" />
+          </template>
+          <view class="mt-2px text-12px">
+            {{ item.text }}
+          </view>
         </view>
       </view>
-      <view class="pb-safe" />
+      <view class="h-1px pb-safe" />
     </view>
     <view class="__placeholder__ h-50px" />
   </view>