oxy-uni-ui 1.2.3 → 2.1.0

package/components/common/util.ts

@@ -16,46 +16,199 @@ function s4() {
     .substring(1)
 }
 
+type UnitConvertOutput = 'number' | 'px'
+type DefaultUnit = 'px' | 'rpx'
+
 /**
- * @description 对num自动填充px
- * @param {Number} num
- * @return {string} num+px
+ * 通用单位转换函数。
+ *
+ * 支持输入：
+ * - `number`、纯数字字符串（如 `'12'`）
+ * - 带单位字符串：`px` / `rpx` / `%` / `em`
+ * - CSS 关键字（仅在 `output='px'` 且 `preserveCssKeyword=true` 时原样透传）
+ *
+ * 转换规则：
+ * - `output='number'`（默认）：返回数值（px 语义）。
+ *   - `rpx` -> `uni.upx2px`
+ *   - `px` -> 原数值
+ *   - `%` -> 按 `base` 计算
+ * - `output='px'`：返回可直接用于内联样式的字符串。
+ *   - 数字/纯数字字符串 -> `${value}px`
+ *   - 可识别单位按规则换算后输出 `${n}px`
+ *   - 关键字（如 `auto`）按配置透传
+ *
+ * @param value 待转换的值。
+ * @param base 百分比计算基准，仅在输入为 `%` 时生效。
+ * @param options 转换配置：
+ * - `output`：`'number' | 'px'`
+ * - `preserveCssKeyword`：`output='px'` 时是否透传 CSS 关键字，默认 `true`
+ * @returns `output='number'` 时返回 `number`；`output='px'` 时返回 `string`。
+ */
+export function unitConvert<T extends UnitConvertOutput = 'number'>(
+  value: string | number | null | undefined,
+  base: number = 0,
+  options: { output?: T; preserveCssKeyword?: boolean } = {}
+): T extends 'px' ? string : number {
+  const output = options.output ?? 'number'
+  const preserveCssKeyword = options.preserveCssKeyword ?? true
+
+  const toNumber = (input: string | number | null | undefined): number => {
+    // 如果是字符串数字
+    if (isNumeric(input)) {
+      return Number(input)
+    }
+    // 如果有单位
+    if (isString(input)) {
+      const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+      const results = reg.exec(input)
+      if (!input || !results) {
+        return 0
+      }
+      const unit = results[3]
+      const _value = parseFloat(input)
+      if (unit === 'rpx') {
+        return uni.upx2px(_value)
+      }
+      if (unit === 'px') {
+        return _value * 1
+      }
+      if (unit == '%') {
+        return (_value / 100) * base
+      }
+      // 如果是其他单位，可以继续添加对应的转换逻辑
+    }
+    return 0
+  }
+
+  if (output === 'px') {
+    if (value === null || value === undefined || value === '') {
+      return '0px' as T extends 'px' ? string : number
+    }
+
+    if (isNumber(value)) {
+      return `${value}px` as T extends 'px' ? string : number
+    }
+
+    if (isString(value)) {
+      const trimmed = value.trim()
+
+      if (!trimmed) {
+        return '0px' as T extends 'px' ? string : number
+      }
+
+      if (
+        preserveCssKeyword &&
+        (trimmed === 'auto' || trimmed === 'inherit' || trimmed === 'initial' || trimmed === 'unset' || trimmed.endsWith('%'))
+      ) {
+        return trimmed as T extends 'px' ? string : number
+      }
+
+      if (isNumeric(trimmed)) {
+        return `${Number(trimmed)}px` as T extends 'px' ? string : number
+      }
+
+      const convertedValue = toNumber(trimmed)
+
+      if (convertedValue || /^-?0(\.0+)?(rpx|px)?$/.test(trimmed)) {
+        return `${convertedValue}px` as T extends 'px' ? string : number
+      }
+
+      return trimmed as T extends 'px' ? string : number
+    }
+
+    return `${toNumber(value)}px` as T extends 'px' ? string : number
+  }
+
+  return toNumber(value) as T extends 'px' ? string : number
+}
+
+/**
+ * 为“无单位值”补充默认单位。
+ *
+ * 行为说明：
+ * - `number` -> `${value}${defaultUnit}`
+ * - 纯数字字符串 -> `${value}${defaultUnit}`
+ * - `null/undefined/''` -> `0${defaultUnit}`
+ * - 已带单位或其他字符串（如 `300rpx`、`20px`、`50%`、`auto`）原样返回
+ *
+ * 典型用途：
+ * - 统一“number 与纯数字字符串”的默认单位语义（如统一按 `rpx`）。
+ *
+ * @param value 输入值。
+ * @param defaultUnit 默认单位，支持 `'px' | 'rpx'`，默认 `'rpx'`。
+ * @returns 补全单位后的字符串结果。
+ */
+export function withDefaultUnit(value: number | string | null | undefined, defaultUnit: DefaultUnit = 'rpx') {
+  if (value === null || value === undefined) {
+    return `0${defaultUnit}`
+  }
+
+  if (isNumber(value)) {
+    return `${value}${defaultUnit}`
+  }
+
+  const trimmed = value.trim()
+
+  if (!trimmed) {
+    return `0${defaultUnit}`
+  }
+
+  if (isNumeric(trimmed)) {
+    return `${trimmed}${defaultUnit}`
+  }
+
+  return trimmed
+}
+
+/**
+ * 先补默认单位，再执行 `unitConvert`，用于得到稳定的数值结果。
+ *
+ * 等价逻辑：
+ * `unitConvert(withDefaultUnit(value, defaultUnit), base)`
+ *
+ * 适用场景：
+ * - 需要做数值比较（如滚动阈值判断），同时希望 `number`/纯数字字符串有明确默认单位语义。
+ *
+ * @param value 输入值。
+ * @param options 配置项：
+ * - `defaultUnit`：无单位值补充的默认单位，默认 `'rpx'`
+ * - `base`：百分比换算基准，默认 `0`
+ * @returns 转换后的数值（px 语义）。
  */
-export function addUnit(num: number | string) {
-  return Number.isNaN(Number(num)) ? `${num}` : `${num}px`
+export function unitConvertWithDefault(value: number | string | null | undefined, options: { defaultUnit?: DefaultUnit; base?: number } = {}) {
+  const { defaultUnit = 'rpx', base = 0 } = options
+  return unitConvert(withDefaultUnit(value, defaultUnit), base)
 }
 
 /**
- * 单位转换函数，将字符串数字或带有单位的字符串转换为数字
- * @param value 要转换的值，可以是字符串数字或带有单位的字符串
- * @returns 转换后的数字，如果无法转换则返回0
+ * 将长度值解析为样式字符串，仅对 `%` 做屏宽换算。
+ *
+ * 行为说明：
+ * - `number`/纯数字字符串：按 `defaultUnit` 补单位（默认补 `rpx`）
+ * - `%`：按 `uni.getSystemInfoSync().windowWidth` 换算后转为 `px`
+ * - 其他带单位值（如 `px/rpx`）：原样返回
+ *
+ * @param value 输入长度值。
+ * @param options 配置项：
+ * - `defaultUnit`：无单位值的默认单位，默认 `'rpx'`
+ * @returns 解析后的样式值字符串；当输入为空时返回空字符串。
  */
-export function unitConvert(value: string | number | null | undefined, base: number = 0): number {
-  // 如果是字符串数字
-  if (isNumeric(value)) {
-    return Number(value)
+export function resolveSizeWithScreenWidth(value: number | string | null | undefined, options: { defaultUnit?: DefaultUnit } = {}) {
+  if (value === '' || value === undefined || value === null) {
+    return ''
   }
-  // 如果有单位
-  if (isString(value)) {
-    const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
-    const results = reg.exec(value)
-    if (!value || !results) {
-      return 0
-    }
-    const unit = results[3]
-    const _value = parseFloat(value)
-    if (unit === 'rpx') {
-      return uni.upx2px(_value)
-    }
-    if (unit === 'px') {
-      return _value * 1
-    }
-    if (unit == '%') {
-      return (_value / 100) * base
-    }
-    // 如果是其他单位，可以继续添加对应的转换逻辑
+
+  const { defaultUnit = 'rpx' } = options
+  const normalized = withDefaultUnit(value, defaultUnit)
+  const trimmed = normalized.trim()
+
+  if (trimmed.endsWith('%')) {
+    const { windowWidth = 0 } = uni.getSystemInfoSync()
+    const percentInPx = unitConvert(trimmed, windowWidth)
+    return `${percentInPx * 2}rpx`
   }
-  return 0
+
+  return normalized
 }
 
 /**

package/components/composables/index.ts

@@ -10,3 +10,4 @@ export { useTouch } from './useTouch'
 export { useTranslate } from './useTranslate'
 export { useUpload } from './useUpload'
 export { useVirtualScroll } from './useVirtualScroll'
+export { useWindowResize } from './useWindowResize'

package/components/composables/usePopover.ts

@@ -1,5 +1,5 @@
 import { getCurrentInstance, ref } from 'vue'
-import { getRect, isObj } from '../common/util'
+import { getRect, isObj, unitConvert } from '../common/util'
 
 export function usePopover(visibleArrow = true) {
   const { proxy } = getCurrentInstance() as any
@@ -14,6 +14,7 @@ export function usePopover(visibleArrow = true) {
   const width = ref<number>(0)
   const height = ref<number>(0)
   const top = ref<number>(0)
+  const toPx = (value: number) => unitConvert(value, 0, { output: 'px' })
 
   function noop() {}
 
@@ -107,64 +108,67 @@ export function usePopover(visibleArrow = true) {
 
     const placements = new Map([
       // 上
-      ['top', [`left: ${verticalX}px; bottom: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']],
+      ['top', [`left: ${toPx(verticalX)}; bottom: ${toPx(verticalY)}; transform: translateX(-50%);`, 'left: 50%;']],
       [
         'top-start',
         [
-          `left: ${offsetX}px; bottom: ${verticalY}px;`,
-          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`
+          `left: ${toPx(offsetX)}; bottom: ${toPx(verticalY)};`,
+          `left: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)};`
         ]
       ],
       [
         'top-end',
         [
-          `right: ${offsetX}px; bottom: ${verticalY}px;`,
-          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`
+          `right: ${toPx(offsetX)}; bottom: ${toPx(verticalY)};`,
+          `right: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)}; transform: translateX(50%);`
         ]
       ],
       // 下
-      ['bottom', [`left: ${verticalX}px; top: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']],
+      ['bottom', [`left: ${toPx(verticalX)}; top: ${toPx(verticalY)}; transform: translateX(-50%);`, 'left: 50%;']],
       [
         'bottom-start',
-        [`left: ${offsetX}px; top: ${verticalY}px;`, `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`]
+        [
+          `left: ${toPx(offsetX)}; top: ${toPx(verticalY)};`,
+          `left: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)};`
+        ]
       ],
       [
         'bottom-end',
         [
-          `right: ${offsetX}px; top: ${verticalY}px;`,
-          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`
+          `right: ${toPx(offsetX)}; top: ${toPx(verticalY)};`,
+          `right: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)}; transform: translateX(50%);`
         ]
       ],
       // 左
-      ['left', [`right: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']],
+      ['left', [`right: ${toPx(horizontalX)}; top: ${toPx(horizontalY)}; transform: translateY(-50%);`, 'top: 50%']],
       [
         'left-start',
         [
-          `right: ${horizontalX}px; top: ${offsetY}px;`,
-          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`
+          `right: ${toPx(horizontalX)}; top: ${toPx(offsetY)};`,
+          `top: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)};`
         ]
       ],
       [
         'left-end',
         [
-          `right: ${horizontalX}px; bottom: ${offsetY}px;`,
-          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`
+          `right: ${toPx(horizontalX)}; bottom: ${toPx(offsetY)};`,
+          `bottom: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)}; transform: translateY(50%);`
         ]
       ],
       // 右
-      ['right', [`left: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']],
+      ['right', [`left: ${toPx(horizontalX)}; top: ${toPx(horizontalY)}; transform: translateY(-50%);`, 'top: 50%']],
       [
         'right-start',
         [
-          `left: ${horizontalX}px; top: ${offsetY}px;`,
-          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`
+          `left: ${toPx(horizontalX)}; top: ${toPx(offsetY)};`,
+          `top: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)};`
         ]
       ],
       [
         'right-end',
         [
-          `left: ${horizontalX}px; bottom: ${offsetY}px;`,
-          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`
+          `left: ${toPx(horizontalX)}; bottom: ${toPx(offsetY)};`,
+          `bottom: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)}; transform: translateY(50%);`
         ]
       ]
     ])

package/components/composables/useVirtualScroll.ts

@@ -4,6 +4,7 @@
 
 import { ref, computed, watch, nextTick, type Ref } from 'vue'
 import { VirtualScrollEngine } from '../oxy-virtual-scroll/virtual-scroll'
+import { unitConvert, unitConvertWithDefault } from '../common/util'
 
 export interface UseVirtualScrollOptions {
   data: Ref<any[]>
@@ -52,7 +53,10 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
   const displayData = computed<any[]>(() => data.value)
 
   const totalHeight = computed(() => {
-    return displayData.value.length * parseFloat(itemHeight.value)
+    return displayData.value.length * unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' })
+  })
+  const backToTopThresholdInPx = computed(() => {
+    return unitConvertWithDefault(backToTopThreshold.value, { defaultUnit: 'rpx' })
   })
 
   // 监听数据变化
@@ -72,13 +76,14 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     if (!virtual.value) {
       // 非虚拟滚动模式：直接使用全部数据
       virtualData.value = displayData.value
+      startIndex.value = 0
       virtualOffsetY.value = 0
       return
     }
 
     virtualEngine.value = new VirtualScrollEngine({
-      containerHeight: parseFloat(height.value),
-      itemHeight: parseFloat(itemHeight.value),
+      containerHeight: unitConvert(height.value),
+      itemHeight: unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }),
       data: displayData.value
     })
     updateVisibleData()
@@ -89,8 +94,8 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     if (!virtual.value) return
 
     virtualEngine.value = new VirtualScrollEngine({
-      containerHeight: parseFloat(height.value),
-      itemHeight: parseFloat(itemHeight.value),
+      containerHeight: unitConvert(height.value),
+      itemHeight: unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }),
       data: displayData.value
     })
   }
@@ -100,52 +105,74 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     if (!virtual.value) return // 非虚拟模式不处理
 
     if (virtualEngine.value) {
-      const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(_scrollTop.value || 0)
+      const { visibleData, offsetY, startIndex: engineStartIndex } = virtualEngine.value.updateVisibleData(_scrollTop.value || 0)
       virtualData.value = visibleData
+      startIndex.value = engineStartIndex
       virtualOffsetY.value = offsetY
     }
   }
 
+  function syncProgrammaticScrollState(scrollTopValue: number) {
+    _scrollTop.value = scrollTopValue
+    showBackTopBtn.value = scrollTopValue > backToTopThresholdInPx.value
+    updateVisibleData()
+  }
+
   // 滚动事件处理
   function onScroll(scrollTopValue: number) {
     _scrollTop.value = scrollTopValue
-    showBackTopBtn.value = scrollTopValue > parseFloat(backToTopThreshold.value)
+    showBackTopBtn.value = scrollTopValue > backToTopThresholdInPx.value
     updateVisibleData()
   }
 
   // 滚动到顶部
   function scrollToTop() {
-    scrollTop.value = 0
-    nextTick(() => {
-      scrollTop.value = 0
-    })
+    scrollToPosition('0px')
   }
 
   // 滚动到底部
   function scrollToBottom() {
-    scrollToPosition(totalHeight.value)
+    scrollToPosition(`${totalHeight.value}px`)
   }
 
   // 滚动到指定位置
   function scrollToPosition(position: number | string) {
-    scrollTop.value = typeof position === 'number' ? position : parseFloat(position)
+    const targetScrollTop = unitConvertWithDefault(position, { defaultUnit: 'rpx' })
+
+    // scroll-view 在绑定值重复时可能不触发滚动，先同步当前真实滚动值再设置目标值
+    if (scrollTop.value === targetScrollTop) {
+      scrollTop.value = _scrollTop.value
+      nextTick(() => {
+        scrollTop.value = targetScrollTop
+        syncProgrammaticScrollState(targetScrollTop)
+      })
+      return
+    }
+
+    scrollTop.value = targetScrollTop
+    syncProgrammaticScrollState(targetScrollTop)
   }
 
   // 滚动到指定元素
   function scrollToElement(item: any) {
-    const index = data.value.findIndex((o) => item[idKey.value] && o[idKey.value] && o[idKey.value] === item[idKey.value])
-    if (index > 0) {
-      const scrollDistance = parseFloat(itemHeight.value) * index
-      scrollToPosition(scrollDistance)
+    const targetId = item?.[idKey.value]
+    if (targetId === undefined || targetId === null) return
+
+    const index = data.value.findIndex((o) => o?.[idKey.value] === targetId)
+    if (index >= 0) {
+      const scrollDistance = unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }) * index
+      scrollToPosition(`${scrollDistance}px`)
     }
   }
 
   // 根据ID滚动到指定元素
   function scrollToElementById(id: string | number) {
-    const index = data.value.findIndex((o) => id && o[idKey.value] && o[idKey.value] === id)
-    if (index > 0) {
-      const scrollDistance = parseFloat(itemHeight.value) * index
-      scrollToPosition(scrollDistance)
+    if (id === undefined || id === null) return
+
+    const index = data.value.findIndex((o) => o?.[idKey.value] === id)
+    if (index >= 0) {
+      const scrollDistance = unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }) * index
+      scrollToPosition(`${scrollDistance}px`)
     }
   }
 

package/components/composables/useWindowResize.ts

@@ -0,0 +1,35 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+export interface WindowResizeResult {
+  size?: {
+    windowWidth?: number
+    windowHeight?: number
+  }
+  windowWidth?: number
+  windowHeight?: number
+}
+
+export type WindowResizeCallback = (result?: WindowResizeResult) => void | Promise<void>
+
+interface UseWindowResizeOptions {
+  immediate?: boolean
+}
+
+export function useWindowResize(callback: WindowResizeCallback, options: UseWindowResizeOptions = {}) {
+  const { immediate = false } = options
+
+  onMounted(() => {
+    if (immediate) {
+      callback()
+    }
+    if (typeof uni.onWindowResize === 'function') {
+      uni.onWindowResize(callback)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (typeof uni.offWindowResize === 'function') {
+      uni.offWindowResize(callback)
+    }
+  })
+}

package/components/oxy-action-sheet/index.scss

@@ -50,16 +50,29 @@
   border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
 }
 
+:deep(.oxy-action-sheet__popup--float) {
+  border-radius: 0 !important;
+  background: transparent !important;
+  overflow: visible !important;
+}
+
 @include b(action-sheet) {
   background-color: $-color-white;
-  padding-bottom: 1px;
+  padding-bottom: 2rpx;
+  margin-bottom: var(--window-bottom);
+
+  @include when(float) {
+    margin: 0 20rpx calc(var(--window-bottom) + 20rpx);
+    border-radius: $-action-sheet-radius;
+    overflow: hidden;
+  }
 
   @include edeep(popup) {
     border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
   }
 
   @include e(actions) {
-    padding: 8px 0;
+    padding: 20rpx 0;
     max-height: 50vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -110,14 +123,14 @@
 
   @include e(subname) {
     display: inline-block;
-    margin-left: 4px;
+    margin-left: 12rpx;
     font-size: $-action-sheet-subname-fs;
     color: $-action-sheet-subname-color;
   }
 
   @include e(cancel) {
     display: block;
-    width: calc(100% - 48px);
+    width: calc(100% - 96rpx);
     line-height: $-action-sheet-cancel-height;
     padding: 0;
     color: $-action-sheet-cancel-color;
@@ -127,7 +140,7 @@
     border: none;
     background: $-action-sheet-cancel-bg;
     outline: none;
-    margin: 0 auto 24px;
+    margin: 0 auto 48rpx;
     font-weight: $-action-sheet-weight;
 
     &:active {
@@ -160,15 +173,15 @@
   }
 
   @include e(panels) {
-    height: 84px;
+    height: 168rpx;
     overflow-y: hidden;
 
     &:first-of-type {
-      margin-top: 20px;
+      margin-top: 40rpx;
     }
 
     &:last-of-type {
-      margin-bottom: 12px;
+      margin-bottom: 24rpx;
     }
   }
 
@@ -179,7 +192,7 @@
   }
 
   @include e(panel) {
-    width: 88px;
+    width: 176rpx;
     flex: 0 0 auto;
     display: inline-block;
     padding: $-action-sheet-panel-padding;
@@ -190,7 +203,7 @@
     width: $-action-sheet-panel-img-fs;
     height: $-action-sheet-panel-img-fs;
     margin: 0 auto;
-    margin-bottom: 7px;
+    margin-bottom: 16rpx;
     border-radius: $-action-sheet-panel-img-radius;
   }
 
@@ -201,4 +214,4 @@
     color: $-action-sheet-color;
     @include lineEllipsis;
   }
-}
+}