oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-swiper/oxy-swiper.vue

@@ -14,11 +14,11 @@
         :circular="loop"
         :vertical="direction == 'vertical'"
         :easing-function="easingFunction"
-        :previous-margin="addUnit(previousMargin)"
-        :next-margin="addUnit(nextMargin)"
+        :previous-margin="withDefaultUnit(previousMargin)"
+        :next-margin="withDefaultUnit(nextMargin)"
         :snap-to-edge="snapToEdge"
         :display-multiple-items="displayMultipleItems"
-        :style="{ height: addUnit(height) }"
+        :style="{ height: withDefaultUnit(height) }"
         @change="handleChange"
         @animationfinish="handleAnimationfinish"
       >
@@ -27,7 +27,7 @@
             <video
               v-if="isVideo(item)"
               :id="`video-${index}-${uid}`"
-              :style="{ height: addUnit(height) }"
+              :style="{ height: withDefaultUnit(height) }"
               :src="isObj(item) ? item[valueKey] : item"
               :poster="isObj(item) ? item.poster : ''"
               :class="`oxy-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
@@ -44,7 +44,7 @@
               v-else
               :src="isObj(item) ? item[valueKey] : item"
               :class="`oxy-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
-              :style="{ height: addUnit(height) }"
+              :style="{ height: withDefaultUnit(height) }"
               :mode="imageMode"
               @click="handleClick(index, item)"
             />
@@ -89,7 +89,7 @@ export default {
 <script lang="ts" setup>
 import OxySwiperNav from '../oxy-swiper-nav/oxy-swiper-nav.vue'
 import { computed, watch, ref, getCurrentInstance, useSlots } from 'vue'
-import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
+import { withDefaultUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
 import { swiperProps, type SwiperList } from './types'
 import type { SwiperNavProps } from '../oxy-swiper-nav/types'
 const slots = useSlots()

package/components/oxy-swiper/types.ts

@@ -86,10 +86,10 @@ export const swiperProps = {
 
   /**
    * 轮播的高度
-   * 类型：number 或 string（数字或可转换为数字的字符串）
-   * 默认值：'192'
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
+   * 默认值：'384'
    */
-  height: makeNumericProp('192'),
+  height: makeNumericProp('384'),
 
   /**
    * 轮播间隔时间，单位为毫秒
@@ -131,7 +131,7 @@ export const swiperProps = {
 
   /**
    * 后边距
-   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
    * 默认值：'0'
    */
   nextMargin: makeNumericProp('0'),
@@ -144,7 +144,7 @@ export const swiperProps = {
   indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
   /**
    * 前边距
-   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 类型：number 或 string（数字或纯数字字符串默认按 rpx 处理）
    * 默认值：'0'
    */
   previousMargin: makeNumericProp('0'),

package/components/oxy-switch/index.scss

@@ -24,22 +24,22 @@
     display: inline-block;
     width: $-switch-circle-size;
     height: $-switch-circle-size;
-    top: 2px;
-    left: 2px;
+    top: 4rpx;
+    left: 4rpx;
     background: #fff;
     border-radius: 50%;
     transition: left .3s ease-out;
-    box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color;
+    box-shadow: 0 4rpx 8rpx 0 $-switch-inactive-shadow-color;
 
     &::after {
       position: absolute;
       content: '';
-      width: calc(200% - 2px);
-      height: calc(200% - 2px);
+      width: calc(200% - 4rpx);
+      height: calc(200% - 4rpx);
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(0.5);
-      border: 1px solid $-switch-border-color;
+      border: 2rpx solid $-switch-border-color;
       border-radius: 50%;
     }
   }
@@ -48,8 +48,8 @@
     border-color: $-switch-active-color;
 
     .oxy-switch__circle {
-      left: calc($-switch-width - $-switch-circle-size - 2px);
-      box-shadow: 0 2px 4px 0 $-switch-active-shadow-color
+      left: calc($-switch-width - $-switch-circle-size - 4rpx);
+      box-shadow: 0 4rpx 8rpx 0 $-switch-active-shadow-color
     }
   }
   @include when(disabled) {

package/components/oxy-switch/oxy-switch.vue

@@ -16,7 +16,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, type CSSProperties, onBeforeMount } from 'vue'
-import { addUnit, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, isFunction, objToStyle } from '../common/util'
 import { switchProps } from './types'
 
 const props = defineProps(switchProps)
@@ -32,7 +32,7 @@ const rootStyle = computed(() => {
     'border-color': props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor
   }
   if (props.size) {
-    rootStyle['font-size'] = addUnit(props.size)
+    rootStyle['font-size'] = withDefaultUnit(props.size)
   }
   return `${objToStyle(rootStyle)}${props.customStyle}`
 })

package/components/oxy-switch/types.ts

@@ -45,7 +45,7 @@ export const switchProps = {
    */
   inactiveColor: String,
   /**
-   * 大小
+   * 大小，number 类型按 `rpx` 语义处理
    */
   size: {
     type: numericProp

package/components/oxy-tab/index.scss

@@ -13,4 +13,14 @@
       transition: height 0.3s ease-in-out;
     }
   }
-}
+}
+
+.is-fullscreen {
+  .oxy-tab {
+    height: 100%;
+    overflow: hidden;
+    .oxy-tab__body {
+      height: 100%;
+    }
+  }
+}

package/components/oxy-tabbar/index.scss

@@ -24,7 +24,7 @@
   @include m(round) {
     margin-left: 32rpx;
     margin-right: 32rpx;
-    border-radius: 999px;
+    border-radius: 999rpx;
     box-shadow: $-tabbar-box-shadow;
 
     @include when(fixed) {

package/components/oxy-tabbar/oxy-tabbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="{ 'oxy-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
+  <view :class="{ 'oxy-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="placeholderStyle">
     <view
       :class="`oxy-tabbar oxy-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
         bordered ? 'is-border' : ''
@@ -23,14 +23,15 @@ export default {
 <script lang="ts" setup>
 import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue'
 import type { TabbarItem } from '../oxy-tabbar-item/types'
-import { addUnit, getRect, isDef, objToStyle } from '../common/util'
+import { getRect, isDef, objToStyle } from '../common/util'
 import { useChildren } from '../composables/useChildren'
+import { useWindowResize } from '../composables/useWindowResize'
 import { TABBAR_KEY, tabbarProps } from './types'
 
 const props = defineProps(tabbarProps)
 const emit = defineEmits(['change', 'update:modelValue'])
 
-const height = ref<number | string>('') // 占位高度
+const placeholderHeight = ref<number | string>('') // 占位高度（rpx 语义）
 const { proxy } = getCurrentInstance() as any
 
 const { linkChildren } = useChildren(TABBAR_KEY)
@@ -48,19 +49,26 @@ const rootStyle = computed(() => {
   return `${objToStyle(style)}${props.customStyle}`
 })
 
+const placeholderStyle = computed(() => {
+  if (!props.fixed || !props.placeholder) {
+    return {}
+  }
+  return {
+    height: `${Number(placeholderHeight.value) || 0}rpx`
+  }
+})
+
 watch(
-  [() => props.fixed, () => props.placeholder],
+  [() => props.fixed, () => props.placeholder, () => props.safeAreaInsetBottom, () => props.shape, () => props.customStyle],
   () => {
     setPlaceholderHeight()
   },
-  { deep: true, immediate: false }
+  { immediate: false }
 )
 
 onMounted(() => {
   if (props.fixed && props.placeholder) {
-    nextTick(() => {
-      setPlaceholderHeight()
-    })
+    setPlaceholderHeight()
   }
 })
 
@@ -76,13 +84,34 @@ function setChange(child: TabbarItem) {
   })
 }
 
+function handleWindowResize() {
+  if (props.fixed && props.placeholder) {
+    setPlaceholderHeight()
+  }
+}
+
+useWindowResize(handleWindowResize)
+
 function setPlaceholderHeight() {
   if (!props.fixed || !props.placeholder) {
+    placeholderHeight.value = ''
     return
   }
 
-  getRect('.oxy-tabbar', false, proxy).then((res) => {
-    height.value = Number(res.height)
+  nextTick(() => {
+    getRect('.oxy-tabbar', false, proxy)
+      .then((res) => {
+        const rectHeight = Number(res.height) || 0
+        const rectTop = Number(res.top)
+        const { windowHeight = 0, windowWidth = 0 } = uni.getSystemInfoSync()
+        const occupiedHeight = windowHeight && !Number.isNaN(rectTop) ? Math.max(windowHeight - rectTop, 0) : rectHeight
+        const occupiedHeightInRpx = windowWidth ? (occupiedHeight * 750) / windowWidth : occupiedHeight * 2
+
+        placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
+      })
+      .catch(() => {
+        placeholderHeight.value = ''
+      })
   })
 }
 </script>

package/components/oxy-table/index.scss

@@ -55,7 +55,7 @@
 
   @include e(header) {
     width: 100%;
-    height: 50px;
+    height: 100rpx;
     position: sticky;
     top: 0;
     z-index: 2;
@@ -84,12 +84,12 @@
     align-items: center;
     box-sizing: border-box;
     background: $-table-bg;
-    width: 100px;
-    min-height: 50px;
-    padding: 8px 10px;
+    width: 200rpx;
+    min-height: 100rpx;
+    padding: 16rpx 20rpx;
     font-size: $-table-font-size;
     color: $-table-color;
-    --oxy-sort-button-height: 30px;
+    --oxy-sort-button-height: 60rpx;
 
     @include when(border) {
       border-right: 1px solid $-table-border-color;

package/components/oxy-table/oxy-table.vue

@@ -122,7 +122,7 @@ export default {
 import OxyTableCol from '../oxy-table-col/oxy-table-col.vue'
 import OxySortButton from '../oxy-sort-button/oxy-sort-button.vue'
 import { type CSSProperties, computed, reactive, ref } from 'vue'
-import { addUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
+import { withDefaultUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
 import type { SortDirection, TableColumn, TableColumnInstance, TableColumnProps } from '../oxy-table-col/types'
 import { TABLE_KEY, tableProps, type TableProvide } from './types'
 import { useTranslate } from '../composables/useTranslate'
@@ -160,7 +160,7 @@ const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
 const tableStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {
-    style['max-height'] = addUnit(props.height)
+    style['max-height'] = withDefaultUnit(props.height)
   }
   return `${objToStyle(style)}${props.customStyle}`
 })
@@ -171,7 +171,7 @@ const realWidthStyle = computed(() => {
   }
   let width: string | number = ''
   children.forEach((child) => {
-    width = width ? `${width} + ${addUnit(child.width)}` : addUnit(child.width)
+    width = width ? `${width} + ${withDefaultUnit(child.width)}` : withDefaultUnit(child.width)
   })
   style['width'] = `calc(${width})`
   return objToStyle(style)
@@ -180,7 +180,9 @@ const realWidthStyle = computed(() => {
 const bodyStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {
-    style['height'] = isDef(props.rowHeight) ? `calc(${props.data.length} * ${addUnit(props.rowHeight)})` : `calc(${props.data.length} * 50px)`
+    style['height'] = isDef(props.rowHeight)
+      ? `calc(${props.data.length} * ${withDefaultUnit(props.rowHeight)})`
+      : `calc(${props.data.length} * 100rpx)`
   }
   return `${objToStyle(style)}`
 })
@@ -208,7 +210,7 @@ function getIsLastFixed(column: { fixed: boolean; prop: string }) {
 function getCellStyle(columnIndex: number) {
   let style: CSSProperties = {}
   if (isDef(children[columnIndex].width)) {
-    style['width'] = addUnit(children[columnIndex].width)
+    style['width'] = withDefaultUnit(children[columnIndex].width)
   }
   if (children[columnIndex].fixed) {
     style = getFixedStyle(columnIndex, style)
@@ -225,7 +227,7 @@ function getFixedStyle(columnIndex: number, style: CSSProperties) {
     let left: string | number = ''
     children.forEach((column, index) => {
       if (index < columnIndex) {
-        left = left ? `${left} + ${addUnit(column.width)}` : addUnit(column.width)
+        left = left ? `${left} + ${withDefaultUnit(column.width)}` : withDefaultUnit(column.width)
       }
     })
     style['left'] = `calc(${left})`

package/components/oxy-table/types.ts

@@ -22,9 +22,9 @@ export const tableProps = {
    */
   height: numericProp,
   /**
-   * 行高
+   * 行高，number 类型按 `rpx` 语义处理
    */
-  rowHeight: makeNumericProp(50),
+  rowHeight: makeNumericProp(100),
   /**
    * 是否显示表头
    */

package/components/oxy-table-col/oxy-table-col.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { type CSSProperties, computed, ref } from 'vue'
-import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
 import { tableColumnProps, type SortDirection } from './types'
 import { useParent } from '../composables/useParent'
 import { TABLE_KEY } from '../oxy-table/types'
@@ -87,7 +87,7 @@ const isLastFixed = computed(() => {
 const columnStyle = computed(() => {
   let style: CSSProperties = {}
   if (isDef(props.width)) {
-    style['width'] = addUnit(props.width)
+    style['width'] = withDefaultUnit(props.width)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)
@@ -102,7 +102,7 @@ const cellStyle = computed(() => {
   let style: CSSProperties = {}
   const rowHeight: string | number = isDef(table) && isDef(table.props) ? table.props.rowHeight : 50 // 自定义行高
   if (isDef(rowHeight)) {
-    style['height'] = addUnit(rowHeight)
+    style['height'] = withDefaultUnit(rowHeight)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)

package/components/oxy-table-col/types.ts

@@ -32,9 +32,9 @@ export const tableColumnProps = {
    */
   label: makeRequiredProp(String),
   /**
-   * 列宽度，单位px
+   * 列宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
-  width: makeNumericProp(100),
+  width: makeNumericProp(200),
   /**
    * 是否开启列排序
    */

package/components/oxy-tabs/index.scss

@@ -30,7 +30,7 @@
 
       @include when(active) {
         color: $-dark-color;
-        border: 1px solid $-tabs-nav-active-color;
+        border: 2rpx solid $-tabs-nav-active-color;
         background-color: $-dark-background;
       }
 
@@ -125,7 +125,7 @@
 
   @include e(line) {
     position: absolute;
-    bottom: 4px;
+    bottom: 8rpx;
     left: 0;
     z-index: 1;
     height: $-tabs-nav-line-height;
@@ -139,6 +139,25 @@
     }
   }
 
+  @include edeep(nav-item-pills){
+    .oxy-tabs__nav-item-text {
+      padding: $-tabs-nav-pills-padding-y $-tabs-nav-pills-padding-x;
+    }
+    .oxy-tabs__nav-item-badge {
+      .oxy-badge__content {
+        margin-top: $-tabs-nav-pills-padding-y;
+        margin-right: $-tabs-nav-pills-padding-x;
+      }
+    }
+    @include when(active) {
+      .oxy-tabs__nav-item-text {
+        background-color: $-tabs-nav-pills-bg-color;
+        border-radius: $-tabs-nav-pills-border-radius;
+        color: $-tabs-nav-pills-color;
+      }
+    }
+  }
+
   @include e(container) {
     overflow: hidden;
   }
@@ -179,8 +198,8 @@
       position: absolute;
       content: '';
       top: 0;
-      left: -24px;
-      width: 24px;
+      left: -48rpx;
+      width: 48rpx;
       height: $-tabs-nav-height - 1;
       background: $-tabs-nav-map-btn-before-bg;
     }
@@ -197,7 +216,7 @@
 
   @include e(map-header) {
     position: relative;
-    padding-left: 17px;
+    padding-left: 34rpx;
     height: $-tabs-nav-height;
     line-height: $-tabs-nav-height;
     font-size: $-tabs-nav-map-fs;
@@ -216,7 +235,7 @@
   @include e(map-body) {
     display: flex;
     flex-wrap: wrap;
-    padding: 20px 15px 10px;
+    padding: 40rpx 30rpx 20rpx;
     background: #fff;
     transition: transform .3s;
     transform: scaleY(0);
@@ -243,12 +262,12 @@
     @include buttonClear;
     @include lineEllipsis;
     display: inline-block;
-    width: 107px;
-    height: 32px;
-    line-height: 32px;
+    width: 214rpx;
+    height: 64rpx;
+    line-height: 64rpx;
     background-color: $-tabs-nav-map-button-back-color;
     border-color: transparent;
-    margin-bottom: 10px;
+    margin-bottom: 20rpx;
     border-radius: $-tabs-nav-map-button-radius;
     color: $-tabs-nav-map-color;
     font-size: $-tabs-nav-map-fs;
@@ -257,7 +276,7 @@
 
     @include when(active) {
       color: $-tabs-nav-active-color;
-      border: 1px solid $-tabs-nav-active-color;
+      border: 2rpx solid $-tabs-nav-active-color;
       background-color: $-tabs-nav-bg
     }
 
@@ -281,19 +300,28 @@
   @include when(slide) {
     .oxy-tabs__nav-item {
       flex: 0 0 auto;
-      padding: 0 17px;
+      padding: 0 34rpx;
     }
   }
 
   @include when(map) {
     .oxy-tabs__nav--wrap {
-      padding-right: 40px;
+      padding-right: 80rpx;
+    }
+  }
+
+  @include when(fullscreen) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .oxy-tabs__container {
+      flex: 1;
     }
   }
 }
 
 @media screen and (max-width: 330px) {
   .oxy-tabs__map-nav-btn {
-    width: 90px;
+    width: 180rpx;
   }
-}
+}

package/components/oxy-tabs/oxy-tabs.vue

@@ -2,7 +2,9 @@
   <template v-if="sticky">
     <oxy-sticky-box>
       <view
-        :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`"
+        :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+          fullscreen ? 'is-fullscreen' : ''
+        }`"
         :style="customStyle"
       >
         <oxy-sticky :offset-top="offsetTop">
@@ -14,17 +16,32 @@
                     @click="handleSelect(index)"
                     v-for="(item, index) in children"
                     :key="index"
-                    :class="`oxy-tabs__nav-item  ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                    :class="`oxy-tabs__nav-item ${props.pills ? 'oxy-tabs__nav-item-pills' : ''} ${state.activeIndex === index ? 'is-active' : ''} ${
+                      item.disabled ? 'is-disabled' : ''
+                    }`"
                     :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
                   >
                     <oxy-badge v-if="item.badgeProps" v-bind="item.badgeProps">
-                      <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                      <text
+                        class="oxy-tabs__nav-item-text"
+                        :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                      >
+                        {{ item.title }}
+                      </text>
                     </oxy-badge>
-                    <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
-
-                    <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                    <text
+                      v-else
+                      class="oxy-tabs__nav-item-text"
+                      :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                    >
+                      {{ item.title }}
+                    </text>
+                    <view
+                      class="oxy-tabs__line oxy-tabs__line--inner"
+                      v-if="!props.pills && state.activeIndex === index && state.useInnerLine"
+                    ></view>
                   </view>
-                  <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+                  <view v-if="!props.pills" class="oxy-tabs__line" :style="state.lineStyle"></view>
                 </view>
               </scroll-view>
             </view>
@@ -75,7 +92,11 @@
   </template>
 
   <template v-else>
-    <view :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`">
+    <view
+      :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+        fullscreen ? 'is-fullscreen' : ''
+      }`"
+    >
       <view class="oxy-tabs__nav">
         <view class="oxy-tabs__nav--wrap">
           <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
@@ -84,16 +105,29 @@
                 v-for="(item, index) in children"
                 @click="handleSelect(index)"
                 :key="index"
-                :class="`oxy-tabs__nav-item ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                :class="`oxy-tabs__nav-item ${props.pills ? 'oxy-tabs__nav-item-pills' : ''} ${state.activeIndex === index ? 'is-active' : ''} ${
+                  item.disabled ? 'is-disabled' : ''
+                }`"
                 :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
               >
                 <oxy-badge custom-class="oxy-tabs__nav-item-badge" v-if="item.badgeProps" v-bind="item.badgeProps">
-                  <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                  <text
+                    class="oxy-tabs__nav-item-text"
+                    :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                  >
+                    {{ item.title }}
+                  </text>
                 </oxy-badge>
-                <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
-                <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                <text
+                  v-else
+                  class="oxy-tabs__nav-item-text"
+                  :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                >
+                  {{ item.title }}
+                </text>
+                <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="!props.pills && state.activeIndex === index && state.useInnerLine"></view>
               </view>
-              <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+              <view v-if="!props.pills" class="oxy-tabs__line" :style="state.lineStyle"></view>
             </view>
           </scroll-view>
         </view>
@@ -145,7 +179,7 @@ import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxySticky from '../oxy-sticky/oxy-sticky.vue'
 import OxyStickyBox from '../oxy-sticky-box/oxy-sticky-box.vue'
 import { computed, getCurrentInstance, onMounted, watch, nextTick, reactive, type CSSProperties, type ComponentInstance } from 'vue'
-import { addUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle } from '../common/util'
+import { withDefaultUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle, unitConvert } from '../common/util'
 import { useTouch } from '../composables/useTouch'
 import { TABS_KEY, tabsProps, type TabsExpose } from './types'
 import { useChildren } from '../composables/useChildren'
@@ -316,23 +350,23 @@ async function updateLineStyle(animation: boolean = true) {
   try {
     const lineStyle: CSSProperties = {}
     if (isDef(lineWidth)) {
-      lineStyle.width = addUnit(lineWidth)
+      lineStyle.width = withDefaultUnit(lineWidth)
     } else {
       if (autoLineWidth) {
         const textRects = await getRect($itemText, true, proxy)
         const textWidth = Number(textRects[state.activeIndex].width)
-        lineStyle.width = addUnit(textWidth)
+        lineStyle.width = unitConvert(textWidth, 0, { output: 'px' })
       }
     }
     if (isDef(lineHeight)) {
-      lineStyle.height = addUnit(lineHeight)
-      lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+      lineStyle.height = withDefaultUnit(lineHeight)
+      lineStyle.borderRadius = `calc(${withDefaultUnit(lineHeight)} / 2)`
     }
     const rects = await getRect($item, true, proxy)
     const rect = rects[state.activeIndex]
     let left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
     if (left) {
-      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+      lineStyle.transform = `translateX(${unitConvert(left, 0, { output: 'px' })}) translateX(-50%)`
       if (animation) {
         lineStyle.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);'
       }