@atooyu/uxto-ui 1.1.45 → 1.1.47

package/dist/style.css

@@ -2380,17 +2380,18 @@ to {
 }
 .u-read-more__toggle-icon[data-v-b31720eb] {
   font-size: 12px;
-}.u-tabbar[data-v-229e6a86] {
+}.u-tabbar[data-v-4e37a87c] {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 999;
   width: 100%;
+  height: 70px;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
-.u-tabbar__nav-wrap[data-v-229e6a86] {
+.u-tabbar__nav-wrap[data-v-4e37a87c] {
   position: absolute;
   left: 14px;
   right: 14px;
@@ -2406,7 +2407,7 @@ to {
   padding: 0 8px;
   box-sizing: border-box;
 }
-.u-tabbar__tab-btn[data-v-229e6a86] {
+.u-tabbar__tab-btn[data-v-4e37a87c] {
   height: 40px;
   border-radius: 20px;
   background: transparent;
@@ -2421,23 +2422,30 @@ to {
   padding: 0 16px;
   margin: 0 20px;
 }
-.u-tabbar__tab-btn--active[data-v-229e6a86] {
+.u-tabbar__tab-btn--active[data-v-4e37a87c] {
   background: #ffffff;
   box-shadow: inset 0 0 0 1px rgba(17, 135, 128, 0.14);
 }
-.u-tabbar__tab-text[data-v-229e6a86] {
+.u-tabbar__tab-content[data-v-4e37a87c] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  pointer-events: none;
+}
+.u-tabbar__tab-text[data-v-4e37a87c] {
   font-weight: 600;
   font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.u-tabbar__center[data-v-229e6a86] {
+.u-tabbar__center[data-v-4e37a87c] {
   position: relative;
   width: 72px;
   height: 56px;
   flex-shrink: 0;
 }
-.u-tabbar__center-btn[data-v-229e6a86] {
+.u-tabbar__center-btn[data-v-4e37a87c] {
   position: absolute;
   left: 50%;
   top: -22px;
@@ -2455,29 +2463,29 @@ to {
   box-shadow: 0 8px 20px rgba(8, 112, 106, 0.25);
   transition: all 200ms ease;
 }
-.u-tabbar__center-btn[data-v-229e6a86]:active {
+.u-tabbar__center-btn[data-v-4e37a87c]:active {
   transform: translateX(-50%) scale(0.95);
 }
-.u-tabbar__center-btn--active[data-v-229e6a86] {
+.u-tabbar__center-btn--active[data-v-4e37a87c] {
   border-color: #12b6af;
   box-shadow: 0 8px 24px rgba(8, 112, 106, 0.35);
 }
-.u-tabbar__center-btn--side-active[data-v-229e6a86] {
+.u-tabbar__center-btn--side-active[data-v-4e37a87c] {
   background: linear-gradient(135deg, #12b6af 0%, #65d8d1 100%);
   border-color: #9fe4dd;
 }
-.u-tabbar__center-btn--side-active .u-tabbar__center-brand[data-v-229e6a86],
-.u-tabbar__center-btn--side-active .u-tabbar__center-text[data-v-229e6a86] {
+.u-tabbar__center-btn--side-active .u-tabbar__center-brand[data-v-4e37a87c],
+.u-tabbar__center-btn--side-active .u-tabbar__center-text[data-v-4e37a87c] {
   color: #ffffff;
 }
-.u-tabbar__center-brand[data-v-229e6a86] {
+.u-tabbar__center-brand[data-v-4e37a87c] {
   font-size: 22px;
   line-height: 1;
   font-weight: 700;
   color: #12b6af;
   letter-spacing: 1px;
 }
-.u-tabbar__center-text[data-v-229e6a86] {
+.u-tabbar__center-text[data-v-4e37a87c] {
   font-size: 12px;
   letter-spacing: 0.5px;
   color: #12b6af;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atooyu/uxto-ui",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "description": "跨平台 UI 组件库 - 支持 Android、iOS、鸿蒙",
   "keywords": [
     "uxto-ui",

package/src/components/u-tabbar/u-tabbar.vue

@@ -6,20 +6,22 @@
       <view
         class="u-tabbar__tab-btn"
         :class="{ 'u-tabbar__tab-btn--active': modelValue === leftTab.value }"
-        @tap="switchTab(leftTab.value)"
+        @tap.stop="switchTab(leftTab.value)"
       >
-        <u-icon
-          v-if="leftTab.icon"
-          :name="leftTab.icon"
-          :size="16"
-          :color="modelValue === leftTab.value ? activeColor : inactiveColor"
-        />
-        <text
-          class="u-tabbar__tab-text"
-          :style="{ color: modelValue === leftTab.value ? activeColor : inactiveColor }"
-        >
-          {{ leftTab.label }}
-        </text>
+        <view class="u-tabbar__tab-content">
+          <u-icon
+            v-if="leftTab.icon"
+            :name="leftTab.icon"
+            :size="16"
+            :color="modelValue === leftTab.value ? activeColor : inactiveColor"
+          />
+          <text
+            class="u-tabbar__tab-text"
+            :style="{ color: modelValue === leftTab.value ? activeColor : inactiveColor }"
+          >
+            {{ leftTab.label }}
+          </text>
+        </view>
       </view>
 
       <!-- 中间占位 + 凸起按钮 -->
@@ -30,7 +32,7 @@
             'u-tabbar__center-btn--active': modelValue === centerTab.value,
             'u-tabbar__center-btn--side-active': modelValue === leftTab.value || modelValue === rightTab.value
           }"
-          @tap="switchTab(centerTab.value)"
+          @tap.stop="switchTab(centerTab.value)"
         >
           <text class="u-tabbar__center-brand">
             {{ centerBrand }}
@@ -45,20 +47,22 @@
       <view
         class="u-tabbar__tab-btn"
         :class="{ 'u-tabbar__tab-btn--active': modelValue === rightTab.value }"
-        @tap="switchTab(rightTab.value)"
+        @tap.stop="switchTab(rightTab.value)"
       >
-        <u-icon
-          v-if="rightTab.icon"
-          :name="rightTab.icon"
-          :size="16"
-          :color="modelValue === rightTab.value ? activeColor : inactiveColor"
-        />
-        <text
-          class="u-tabbar__tab-text"
-          :style="{ color: modelValue === rightTab.value ? activeColor : inactiveColor }"
-        >
-          {{ rightTab.label }}
-        </text>
+        <view class="u-tabbar__tab-content">
+          <u-icon
+            v-if="rightTab.icon"
+            :name="rightTab.icon"
+            :size="16"
+            :color="modelValue === rightTab.value ? activeColor : inactiveColor"
+          />
+          <text
+            class="u-tabbar__tab-text"
+            :style="{ color: modelValue === rightTab.value ? activeColor : inactiveColor }"
+          >
+            {{ rightTab.label }}
+          </text>
+        </view>
       </view>
     </view>
   </view>
@@ -124,7 +128,7 @@ const switchTab = (tab: string) => {
 <script lang="ts">
 export default {
   options: {
-    virtualHost: true,
+    virtualHost: false,
     styleIsolation: 'shared'
   }
 }
@@ -145,6 +149,8 @@ $--paper: #ffffff;
   bottom: 0;
   z-index: 999;
   width: 100%;
+  // 设置高度，确保触摸区域正确
+  height: 70px;
   // 底部安全区域适配
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
@@ -188,6 +194,15 @@ $--paper: #ffffff;
     }
   }
 
+  // Tab内容容器 - 防止子元素拦截点击
+  &__tab-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    pointer-events: none;
+  }
+
   &__tab-text {
     font-weight: 600;
     font-size: 14px;