oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-tabs/types.ts

@@ -52,11 +52,11 @@ export const tabsProps = {
    */
   autoLineWidth: makeBooleanProp(false),
   /**
-   * 底部条宽度，单位像素
+   * 底部条宽度，支持 `px/rpx`
    */
   lineWidth: numericProp,
   /**
-   * 底部条高度，单位像素
+   * 底部条高度，支持 `px/rpx`
    */
   lineHeight: numericProp,
   /**
@@ -80,7 +80,19 @@ export const tabsProps = {
    * 可选值：'auto' | 'always'
    * @default auto
    */
-  slidable: makeStringProp<TabsSlidable>('auto')
+  slidable: makeStringProp<TabsSlidable>('auto'),
+  /**
+   * 是否开启胶囊模式
+   */
+  pills: makeBooleanProp(false),
+  /**
+   * 胶囊背景颜色
+   */
+  pillsColor: makeStringProp(''),
+  /**
+   * 是否开启全屏模式
+   */
+  fullscreen: makeBooleanProp(false)
 }
 
 export type TabsExpose = {

package/components/oxy-tag/index.scss

@@ -8,23 +8,23 @@
     background: transparent;
     color: $normalColor;
     border: 1px solid $normalColor;
-    padding: 0 4px;
+    padding: 0 8rpx;
   }
   @include when(round) {
     line-height: 1.2;
     font-size: $-tag-fs;
-    padding: 4px 11px;
+    padding: 8rpx 22rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
     border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
     border-radius: $-tag-round-radius;
   }
   @include when(mark) {
-    padding: 1px 6px;
+    padding: 2rpx 12rpx;
     border-radius: $-tag-mark-radius;
 
     @include when(plain) {
-      padding: 0 6px;
+      padding: 0 12rpx;
     }
   }
   @include when(active) {
@@ -36,8 +36,8 @@
   font-size: $-tag-small-fs;
   display: inline-block;
   color: $-tag-color;
-  padding: 0 3px;
-  border-radius: 2px;
+  padding: 0 6rpx;
+  border-radius: 4rpx;
   transition: opacity .3s;
   vertical-align: middle;
   line-height: initial;
@@ -60,11 +60,11 @@
   @include when(icon) {
     font-size: $-tag-fs;
     line-height: 1.2;
-    padding: 2px 5px;
+    padding: 4rpx 10rpx;
   }
   @include when(dynamic) {
     box-sizing: border-box;
-    width: 88px;
+    width: 176rpx;
     transition: .3s;
 
     &:active {
@@ -77,7 +77,7 @@
   }
   @include edeep(icon) {
     display: inline-block;
-    margin-right: 4px;
+    margin-right: 8rpx;
     font-size: $-tag-fs;
     line-height: 1.2;
     vertical-align: baseline;
@@ -87,9 +87,9 @@
     vertical-align: text-top;
   }
   @include e(add-text) {
-    width: 60px;
-    height: 14px;
-    min-height: 14px;
+    width: 120rpx;
+    height: 28rpx;
+    min-height: 28rpx;
     display: inline-block;
     font-size: $-tag-fs;
     vertical-align: middle;
@@ -97,10 +97,10 @@
   }
   @include e(close) {
     display: inline-block;
-    margin-left: 24px;
-    margin-right: -4px;
+    margin-left: 48rpx;
+    margin-right: -8rpx;
     font-size: $-tag-close-size;
-    height: 14px;
+    height: 28rpx;
     line-height: 1.1;
     vertical-align: text-bottom;
     color: $-tag-close-color;

package/components/oxy-text/index.scss

@@ -34,4 +34,8 @@
   @include when(success) {
     color: $-text-success-color;
   }
-}
+
+  @include e(btn) {
+    color: $-text-primary-color;
+  }
+}

package/components/oxy-text/oxy-text.vue

@@ -1,8 +1,16 @@
 <template>
-  <text @click="handleClick" :class="rootClass" :style="rootStyle">
+  <oxy-tooltip v-if="props.tooltip && isTextOverflow" :content="formattedText">
+    <text @click="handleClick" :class="`${rootClass} is-lines-${props.lines}`" :style="rootStyle">
+      <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
+      <text>{{ formattedText }}</text>
+      <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+    </text>
+  </oxy-tooltip>
+  <text v-else :id="textId" @click="handleClick" :class="rootClass" :style="rootStyle">
     <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
-    <text>{{ formattedText }}</text>
+    <text>{{ props.toggleExpand && isTextOverflow && !expanded ? realText : formattedText }}</text>
     <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+    <text v-if="props.toggleExpand && isTextOverflow" class="oxy-text__btn" @click.stop="handleToggle">{{ expanded ? '收起' : '展开' }}</text>
   </text>
 </template>
 
@@ -18,15 +26,24 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { isDef, objToStyle } from '../common/util'
+import { computed, ref, watch, nextTick, getCurrentInstance } from 'vue'
+import { isDef, objToStyle, uuid, getRect } from '../common/util'
 import { textProps } from './types'
 import dayjs from '../../dayjs'
+import OxyTooltip from '../oxy-tooltip/oxy-tooltip.vue'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(textProps)
 const emit = defineEmits(['click'])
 
+const { proxy } = getCurrentInstance() as any
+const textId = ref<string>(`oxy-text${uuid()}`)
+const expanded = ref<boolean>(false)
+const isTextOverflow = ref<boolean>(false)
+const realText = ref<string>('')
+const offset = ref<number>(0)
+const showTooltip = ref<boolean>(false)
+
 // 存储文本类名的响应式变量
 const textClass = ref<string>('')
 
@@ -39,7 +56,9 @@ watch(
     color: props.color,
     bold: props.bold,
     lines: props.lines,
-    format: props.format
+    format: props.format,
+    toggleExpand: props.toggleExpand,
+    tooltip: props.tooltip
   }),
   ({ type }) => {
     // 验证 type 属性
@@ -77,12 +96,12 @@ const rootStyle = computed(() => {
 
 // 计算文本类名的函数
 function computeTextClass() {
-  const { type, color, bold, lines } = props
+  const { type, color, bold, lines, toggleExpand, tooltip } = props
   const textClassList: string[] = []
   if (!color) {
     textClassList.push(`is-${type}`)
   }
-  if (isDef(lines)) {
+  if (isDef(lines) && !toggleExpand && !tooltip) {
     textClassList.push(`is-lines-${lines}`)
   }
   bold && textClassList.push('is-bold')
@@ -128,6 +147,56 @@ const formattedText = computed(() => {
   return formatText(`${text}`, format, mode)
 })
 
+watch(
+  formattedText,
+  (value) => {
+    nextTick(() => {
+      if (props.toggleExpand || props.tooltip) {
+        realText.value = value
+        offset.value = realText.value.length
+        const view = uni.createSelectorQuery().in(proxy).select(`#${textId.value}`)
+        view
+          .fields({ computedStyle: ['fontSize', 'lineHeight'] }, (res: any) => {
+            getRect(`#${textId.value}`, true, proxy)
+              .then((rects: any) => {
+                if (res && Array.isArray(rects) && rects.length && props.lines) {
+                  const lines = rects[0].height / Number.parseFloat(res.lineHeight.replace('px', ''))
+                  isTextOverflow.value = lines > props.lines
+                  if (props.toggleExpand && isTextOverflow.value) {
+                    const size = Math.floor(rects[0].width / Number.parseFloat(res.fontSize.replace('px', '')))
+                    // 中英文字符长度区分
+                    const length = size * props.lines - 4
+                    let realOffset = 0
+                    let realLength = 0
+                    for (let i = 0; i < offset.value; i++) {
+                      if (realText.value.charCodeAt(i) > 127) {
+                        realLength += 1
+                      } else {
+                        realLength += 0.5
+                      }
+                      realOffset++
+                      if (realLength >= length) {
+                        offset.value = realOffset
+                        break
+                      }
+                    }
+                    realText.value = `${value.substring(0, offset.value)}...`
+                  }
+                }
+              })
+              .catch(() => {})
+          })
+          .exec()
+      }
+    })
+  },
+  { deep: true, immediate: true }
+)
+
+function handleToggle() {
+  expanded.value = !expanded.value
+}
+
 // 处理点击事件
 function handleClick(event: Event) {
   emit('click', event)

package/components/oxy-text/types.ts

@@ -79,6 +79,18 @@ export const textProps = {
    * 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
    */
   lines: Number,
+  /**
+   * 文本超出，展开收起显示全部
+   * 类型：boolean
+   * 默认值：false
+   */
+  toggleExpand: makeBooleanProp(false),
+  /**
+   * 文本超出，tooltip显示全部
+   * 类型：boolean
+   * 默认值：false
+   */
+  tooltip: makeBooleanProp(false),
   /**
    * 文本行高
    * 类型：string

package/components/oxy-textarea/index.scss

@@ -144,11 +144,11 @@
     box-sizing: border-box;
 
     @include when(show-limit) {
-      padding-bottom: 36px;
+      padding-bottom: 72rpx;
     }
 
     @include when(suffix) {
-      padding-right: calc($-textarea-icon-size + 8px);
+      padding-right: calc($-textarea-icon-size + 16rpx);
     }
   }
 
@@ -164,7 +164,7 @@
     border: none;
     box-sizing: border-box;
     word-break: break-word;
-    min-height: 24px;
+    min-height: 48rpx;
 
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
@@ -198,12 +198,12 @@
 
   @include e(count) {
     position: absolute;
-    bottom: 8px;
+    bottom: 16rpx;
     right: 0;
     font-size: $-textarea-count-fs;
     color: $-textarea-count-color;
     background: $-textarea-bg;
-    line-height: 20px;
+    line-height: 40rpx;
     display: inline-flex;
   }
 
@@ -258,7 +258,7 @@
 
   @include when(auto-height) {
     &:not(.is-cell) {
-      padding: 5px 0;
+      padding: 10rpx 0;
     }
 
     &::after {

package/components/oxy-toast/oxy-toast.vue

@@ -31,8 +31,10 @@
         :class-prefix="classPrefix"
         :name="iconClass"
       ></oxy-icon>
-      <!--文本-->
-      <view v-if="msg" class="oxy-toast__msg">{{ msg }}</view>
+      <!--文本/插槽内容-->
+      <view v-if="hasContent" class="oxy-toast__msg">
+        <slot>{{ msg }}</slot>
+      </view>
     </view>
   </oxy-transition>
 </template>
@@ -54,13 +56,14 @@ import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 
-import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import { computed, inject, onBeforeMount, ref, useSlots, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
 import { defaultOptions, getToastOptionKey, toastIcon } from '.'
 import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
-import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, isFunction, objToStyle } from '../common/util'
 
 const props = defineProps(toastProps)
+const slots = useSlots()
 const iconName = ref<string>('') // 图标类型
 const msg = ref<string>('') // 消息内容
 const position = ref<string>('middle')
@@ -124,10 +127,19 @@ const transitionStyle = computed(() => {
   return objToStyle(style)
 })
 
+const hasCustomContent = computed(() => {
+  const slotNodes = slots.default?.()
+  return !!slotNodes?.length
+})
+
+const hasContent = computed(() => {
+  return !!msg.value || hasCustomContent.value
+})
+
 const rootClass = computed(() => {
   return `oxy-toast ${props.customClass} oxy-toast--${position.value} ${
-    (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'oxy-toast--with-icon' : ''
-  } ${iconName.value === 'loading' && !msg.value ? 'oxy-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
+    (iconName.value !== 'loading' || hasContent.value) && (iconName.value || iconClass.value) ? 'oxy-toast--with-icon' : ''
+  } ${iconName.value === 'loading' && !hasContent.value ? 'oxy-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
 })
 
 const svgStyle = computed(() => {
@@ -184,8 +196,12 @@ function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
   zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex
   loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
   loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
-  iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
-  loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
+  iconSize.value = isDef(option.iconSize) ? withDefaultUnit(option.iconSize) : isDef(props.iconSize) ? withDefaultUnit(props.iconSize) : undefined
+  loadingSize.value = isDef(option.loadingSize)
+    ? withDefaultUnit(option.loadingSize)
+    : isDef(props.loadingSize)
+    ? withDefaultUnit(props.loadingSize)
+    : undefined
   cover.value = isDef(option.cover!) ? option.cover! : props.cover
   classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix
   direction.value = isDef(option.direction) ? option.direction : props.direction

package/components/oxy-tooltip/index.scss

@@ -22,15 +22,15 @@
 
   @include edeep(pos) {
     position: absolute;
-    min-width: 138px;
-    min-height: 36px;
+    min-width: 276rpx;
+    min-height: 72rpx;
     font-size: $-tooltip-fs;
     backdrop-filter: blur($-tooltip-blur);
     background-clip: padding-box;
     border-radius: $-tooltip-radius;
     background: $-tooltip-bg;
     color: $-tooltip-color;
-    text-align: center;
+    // text-align: center;
     box-sizing: border-box;
     z-index: $-tooltip-z-index;
   }
@@ -49,18 +49,18 @@
 
   @include e(inner) {
     padding: $-tooltip-padding;
-    white-space: nowrap;
+    // white-space: nowrap;
     line-height: $-tooltip-line-height;
   }
 
   @include edeep(close-icon) {
-    font-size: 12px;
+    font-size: 24rpx;
     position: absolute;
-    right: -8px;
-    top: -10px;
+    right: -16rpx;
+    top: -20rpx;
     transform: scale(0.5);
-    padding: 10px;
+    padding: 20rpx;
   }
 
   @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
-}
+}

package/components/oxy-tree/index.scss

@@ -26,15 +26,18 @@
   .oxy-tree__search{
     display: flex;
     :deep(.oxy-button){
-      min-width: 60px;
+      min-width: 120rpx;
     }
     :deep(.oxy-tree__search-input) {
       flex: 1;
       background-color: $-tree-search-input-color;
-      padding: 6px 12px;
-      border-radius: 4px;
-      margin-bottom: 8px;
-      margin-right: 12px;
+      padding: 12rpx 24rpx;
+      border-radius: 8rpx;
+      margin-bottom: 16rpx;
+      margin-right: 24rpx;
+      .oxy-input__icon{
+        background: transparent;
+      }
     }
   }
 
@@ -43,18 +46,20 @@
 
 .oxy-tree-node-content {
   display: flex;
-  width: fit-content;
   width: 100%;
-  white-space: nowrap;
   align-items: center;
+  box-sizing: border-box;
+  padding-right: $-tree-node-padding-right;
+  border-radius: $-tree-node-radius;
+  color: $-color-secondary;
+  font-size: $-tree-node-font-size;
+  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
 
-  &.expanded {
-    :deep(.oxy-tree-node-icon) {
-      transform: rotate(0deg);
+  &.is-leaf {
+    .oxy-tree-node-toggle {
+      pointer-events: none;
     }
-  }
 
-  &.is-leaf {
     :deep(.oxy-tree-node-icon) {
       opacity: 0;
     }
@@ -63,14 +68,31 @@
   &.is-current {
     background-color: $-tree-node-current-bg;
     color: $-tree-node-current-color;
+    font-weight: $-fw-medium;
+
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-icon-active-color;
+    }
+  }
+
+  &.checked {
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-icon-active-color;
+    }
   }
 
   &.is-disabled {
     color: $-tree-node-disabled-color;
+    opacity: $-button-disabled-opacity;
+
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-disabled-color;
+    }
   }
 
   :deep(.oxy-checkbox) {
-    margin-right: 6px;
+    margin-right: $-size-side-padding-small;
+    flex-shrink: 0;
 
     .oxy-checkbox__label {
       display: none;
@@ -90,10 +112,24 @@
   }
 
   :deep(.oxy-tree-node-icon) {
-    transform: rotate(-90deg);
+    color: $-tree-node-icon-color;
+    font-size: $-tree-node-icon-size;
+    transition: none;
+  }
+
+  .oxy-tree-node-toggle {
+    width: $-tree-node-icon-box-size;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $-tree-node-icon-gap;
+    flex-shrink: 0;
   }
 
   .oxy-tree-node {
     flex: 1;
+    min-width: 0;
+    @include lineEllipsis;
   }
-}
+}

package/components/oxy-tree/oxy-tree.vue

@@ -17,13 +17,16 @@
 
     <view v-if="data.length" class="oxy-tree__virtual-scroll" :style="{ height: height }">
       <scroll-view class="oxy-tree__view" scroll-y :scroll-x="true" :scroll-top="scrollTop" @scroll="handleScroll">
-        <view class="oxy-tree__container" :style="{ height: totalHeight + 'px' }">
-          <view class="oxy-tree__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+        <view class="oxy-tree__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+          <view class="oxy-tree__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: 'px' })})` }">
             <view v-for="(item, index) in virtualData" :key="index">
               <view class="oxy-tree-node-content" :style="getNodeStyle(item)" :class="getNodeClass(item)" @click="handleNodeClick(item)">
                 <!-- 兼容支付宝、微信小程序 -->
-                <view @tap.stop="handleClickExpand(item)">
-                  <oxy-icon name="fill-arrow-down" custom-class="oxy-tree-node-icon" size="22px"></oxy-icon>
+                <view class="oxy-tree-node-toggle" @tap.stop="handleClickExpand(item)">
+                  <oxy-icon
+                    :name="expandedKeySet.has(item.key) ? 'chevron-down-circle' : 'chevron-right-circle'"
+                    custom-class="oxy-tree-node-icon"
+                  ></oxy-icon>
                 </view>
                 <oxy-checkbox
                   v-if="showCheckbox"
@@ -49,7 +52,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -71,6 +74,7 @@ import type { RawTreeNode, Tree, TreeInstance, TreeNode } from './types'
 import { treeProps, type TreeExpose } from './types'
 import { isSetsEqual, useTreeMethods } from './utils'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { withDefaultUnit, unitConvert, unitConvertWithDefault } from '../common/util'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(treeProps)
@@ -334,8 +338,8 @@ const updateValue = () => {
 }
 const getNodeStyle = (item: TreeNode) => {
   return {
-    height: itemHeight.value,
-    paddingLeft: `${(item.level - 1) * (props.indent || 16)}px`
+    height: withDefaultUnit(itemHeight.value, 'rpx'),
+    paddingLeft: withDefaultUnit((item.level - 1) * (props.indent || 16))
   }
 }
 const getNodeClass = (item: TreeNode) => {
@@ -384,8 +388,8 @@ const scrollToTop = () => {
 }
 const scrollToBottom = () => {
   const visibleCount = flattenTree.value.length
-  const containerHeight = parseFloat(height.value || '0')
-  const targetScrollTop = Math.max(visibleCount * parseFloat(itemHeight.value) - containerHeight, 0)
+  const containerHeight = unitConvert(height.value)
+  const targetScrollTop = Math.max(visibleCount * unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }) - containerHeight, 0)
   virtualScrollToPosition(targetScrollTop)
 }
 const scrollToPosition = (position: number | string) => {

package/components/oxy-tree/types.ts

@@ -48,7 +48,7 @@ export const treeProps = {
     default: ''
   },
   emptyText: makeStringProp('暂无数据'),
-  height: makeStringProp('300px'),
+  height: makeStringProp('600rpx'),
   /**
    * 是否显示回到顶部按钮
    * 类型：boolean
@@ -57,17 +57,20 @@ export const treeProps = {
   showBackToTop: makeBooleanProp(false),
   /**
    * 滚动多远显示backToTop
-   * 类型：number
-   * 默认值：'300px'
+   * 类型：string（支持 `px/rpx`，纯数字字符串按 rpx 处理）
+   * 默认值：'600rpx'
    */
-  backToTopThreshold: makeStringProp('300px'),
+  backToTopThreshold: makeStringProp('600rpx'),
   /**
-   * 单个项目高度
-   * 类型：number
-   * 默认值：'44px'
+   * 列表项的预估高度，需带单位
+   * @description 虚拟列表会根据此值计算占位高度，越准确滚动越平滑。支持如 '44px' 或 '88rpx'，纯数字字符串按 rpx 处理。
+   * 默认值：'88rpx'
    */
-  itemHeight: makeStringProp('44px'),
-  indent: makeNumberProp(16),
+  itemHeight: makeStringProp('88rpx'),
+  /**
+   * 相邻级节点间的水平缩进，number 类型按 `rpx` 语义处理
+   */
+  indent: makeNumberProp(32),
   selectionLeafOnly: makeBooleanProp(false),
   filterMethod: {
     type: Function as PropType<(keyword: string, node: RawTreeNode) => boolean>,