oxy-uni-ui 2.0.0 → 2.1.1

package/components/common/util.ts

@@ -180,6 +180,31 @@ export function unitConvertWithDefault(value: number | string | null | undefined
   return unitConvert(withDefaultUnit(value, defaultUnit), base)
 }
 
+/**
+ * 将 px 数值转换为 rpx 数值。
+ *
+ * 优先级：
+ * - 1) 优先使用 `uni.upx2px(100)` 反推，确保与平台运行时换算一致
+ * - 2) 回退到 `windowWidth` 按 `750` 基准换算
+ * - 3) 仍不可用时返回原值，避免使用固定倍数造成系统性偏差
+ *
+ * @param pxValue px 语义数值。
+ * @returns rpx 语义数值。
+ */
+export function convertPxToRpx(pxValue: number) {
+  const pxPer100Rpx = uni.upx2px(100)
+  if (pxPer100Rpx > 0) {
+    return (pxValue / pxPer100Rpx) * 100
+  }
+
+  const { windowWidth = 0 } = uni.getSystemInfoSync()
+  if (windowWidth > 0) {
+    return (pxValue * 750) / windowWidth
+  }
+
+  return pxValue
+}
+
 /**
  * 将长度值解析为样式字符串，仅对 `%` 做屏宽换算。
  *

package/components/composables/useDynamicVirtualScroll.ts

@@ -0,0 +1,80 @@
+import { ref, computed, type Ref } from 'vue'
+
+export interface DynamicVirtualScrollItem {
+  top: number
+  height: number
+  [key: string]: any
+}
+
+export interface UseDynamicVirtualScrollOptions<T extends DynamicVirtualScrollItem> {
+  data: Ref<T[]>
+  scrollTop: Ref<number>
+  viewportHeight: Ref<number>
+  buffer?: number
+}
+
+export function useDynamicVirtualScroll<T extends DynamicVirtualScrollItem>(options: UseDynamicVirtualScrollOptions<T>) {
+  const { data, scrollTop, viewportHeight, buffer = 0 } = options
+
+  const visibleData = computed(() => {
+    const st = scrollTop.value
+    const sh = viewportHeight.value
+    const buf = buffer || sh // 默认上下多预留一屏高度
+
+    const minTop = st - buf
+    const maxTop = st + sh + buf
+
+    // 二分查找第一个进入可视区的元素
+    let left = 0
+    let right = data.value.length - 1
+    let startIndex = 0
+
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2)
+      const item = data.value[mid]
+      if (item.top + item.height > minTop) {
+        startIndex = mid
+        right = mid - 1
+      } else {
+        left = mid + 1
+      }
+    }
+
+    // 从 startIndex 往后取，直到超出可视区
+    const result = []
+    for (let i = startIndex; i < data.value.length; i++) {
+      const item = data.value[i]
+      if (item.top < maxTop) {
+        result.push({ ...item, index: i })
+      } else {
+        break
+      }
+    }
+
+    return result
+  })
+
+  const getTargetIndex = (st: number) => {
+    let left = 0
+    let right = data.value.length - 1
+    let targetIndex = 0
+
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2)
+      const item = data.value[mid]
+      if (st < item.top + item.height) {
+        targetIndex = mid
+        right = mid - 1
+      } else {
+        left = mid + 1
+      }
+    }
+
+    return targetIndex
+  }
+
+  return {
+    visibleData,
+    getTargetIndex
+  }
+}

package/components/composables/useVirtualScroll.ts

@@ -55,6 +55,9 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
   const totalHeight = computed(() => {
     return displayData.value.length * unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' })
   })
+  const backToTopThresholdInPx = computed(() => {
+    return unitConvertWithDefault(backToTopThreshold.value, { defaultUnit: 'rpx' })
+  })
 
   // 监听数据变化
   watch(
@@ -73,6 +76,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     if (!virtual.value) {
       // 非虚拟滚动模式：直接使用全部数据
       virtualData.value = displayData.value
+      startIndex.value = 0
       virtualOffsetY.value = 0
       return
     }
@@ -101,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 > unitConvertWithDefault(backToTopThreshold.value, { defaultUnit: 'rpx' })
+    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 = unitConvertWithDefault(position, { defaultUnit: 'rpx' })
+    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 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)
+      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) {
+    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)
+      scrollToPosition(`${scrollDistance}px`)
     }
   }
 

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

@@ -57,7 +57,7 @@
 }
 
 @include b(action-sheet) {
-  background-color: $-color-white;
+  background-color: $-action-sheet-bg;
   padding-bottom: 2rpx;
   margin-bottom: var(--window-bottom);
 
@@ -72,7 +72,7 @@
   }
 
   @include e(actions) {
-    padding: 16rpx 0;
+    padding: 20rpx 0;
     max-height: 50vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -111,7 +111,7 @@
       line-height: initial;
     }
   }
-  
+
   @include edeep(action-loading){
     width: $-action-sheet-loading-size;
     height: $-action-sheet-loading-size;
@@ -123,7 +123,7 @@
 
   @include e(subname) {
     display: inline-block;
-    margin-left: 8rpx;
+    margin-left: 12rpx;
     font-size: $-action-sheet-subname-fs;
     color: $-action-sheet-subname-color;
   }
@@ -169,7 +169,7 @@
     color: $-action-sheet-close-color;
     font-size: $-action-sheet-close-fs;
     transform: rotate(-45deg);
-    line-height: 1.1;
+    line-height: $-line-height-tight;
   }
 
   @include e(panels) {
@@ -181,7 +181,7 @@
     }
 
     &:last-of-type {
-      margin-bottom: 24rpx;
+      margin-bottom: $-spacing-24;
     }
   }
 
@@ -203,13 +203,13 @@
     width: $-action-sheet-panel-img-fs;
     height: $-action-sheet-panel-img-fs;
     margin: 0 auto;
-    margin-bottom: 14rpx;
+    margin-bottom: $-spacing-16;
     border-radius: $-action-sheet-panel-img-radius;
   }
 
   @include e(panel-title) {
     font-size: $-action-sheet-subname-fs;
-    line-height: 1.2;
+    line-height: $-line-height-base;
     text-align: center;
     color: $-action-sheet-color;
     @include lineEllipsis;

package/components/oxy-backtop/index.scss

@@ -16,10 +16,10 @@
   }
 
   @include when(circle) {
-    border-radius: 50%;
+    border-radius: $-radius-circle;
   }
 
   @include when(square) {
-    border-radius: 8rpx;
+    border-radius: $-backtop-square-radius;
   }
-}
+}

package/components/oxy-badge/index.scss

@@ -28,7 +28,7 @@
     text-align: center;
     white-space: nowrap;
     border: $-badge-border;
-    font-weight: 500;
+    font-weight: $-fw-medium;
 
     @include when(fixed) {
       position: absolute;
@@ -41,7 +41,7 @@
       height: $-badge-dot-size;
       width: $-badge-dot-size;
       padding: 0;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
     }
 
     @each $type in (primary, success, warning, info, danger) {

package/components/oxy-button/index.scss

@@ -47,7 +47,6 @@
   display: inline-block;
   outline: none;
   -webkit-appearance: none;
-  outline: none;
   background: transparent;
   box-sizing: border-box;
   border: none;
@@ -97,7 +96,7 @@
   }
 
   @include e(loading) {
-    margin-right: 10rpx;
+    margin-right: 12rpx;
     animation: oxy-rotate 0.8s linear infinite;
     animation-duration: 2s;
   }
@@ -109,8 +108,6 @@
     background-repeat: no-repeat;
   }
 
-  @include when(loading) {}
-
   @include when(primary) {
     background: $-button-primary-bg-color;
     color: $-button-primary-color;
@@ -161,7 +158,7 @@
 
       @include when(icon) {
         min-width: 0;
-        border-radius: 50%;
+        border-radius: $-radius-circle;
       }
 
       @include when(text) {
@@ -194,7 +191,7 @@
 
 
   @include when(round) {
-    border-radius: 1998rpx;
+    border-radius: $-button-round-radius;
   }
 
   @include when(text) {
@@ -223,7 +220,7 @@
 
   @include when(plain) {
     background: $-button-plain-bg-color;
-    border: 1px solid currentColor;
+    border: #{$-border-width-base} solid currentColor;
 
     @include when(primary) {
       color: $-button-primary-bg-color;
@@ -295,7 +292,7 @@
     width: $-button-icon-size;
     height: $-button-icon-size;
     padding: 0;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     color: $-button-icon-color;
 
     &::after {

package/components/oxy-calendar/index.scss

@@ -62,7 +62,7 @@
 
   @include e(tabs) {
     width: 444rpx;
-    margin: 20rpx auto 24rpx;
+    margin: 24rpx auto 28rpx;
   }
 
   @include e(shortcuts) {
@@ -71,7 +71,7 @@
   }
 
   @include edeep(tag) {
-    margin-right: 16rpx;
+    margin-right: $-spacing-16;
   }
 
   @include e(view) {
@@ -88,30 +88,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 28rpx;
+    font-size: $-fs-content;
 
     @include when(monthrange) {
-      padding-bottom: 20rpx;
-      box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
+      padding-bottom: $-spacing-24;
+      box-shadow: $-calendar-panel-shadow-light;
     }
   }
 
   @include e(range-label-item) {
     flex: 1;
-    color: rgba(0, 0, 0, 0.85);
+    color: $-calendar-day-color;
 
     @include when(placeholder) {
-      color: rgba(0, 0, 0, 0.25);
+      color: $-calendar-disabled-color;
     }
   }
 
   @include e(range-sperator) {
     margin: 0 48rpx;
-    color: rgba(0, 0, 0, 0.25);
+    color: $-calendar-disabled-color;
   }
 
   @include e(confirm) {
-    padding: 24rpx 50rpx 28rpx;
+    padding: 28rpx 52rpx 32rpx;
   }
 
   @include edeep(cell) {
@@ -155,4 +155,4 @@
     color: $-cell-clear-color;
     line-height: $-cell-line-height;
   }
-}
+}

package/components/oxy-calendar/oxy-calendar.vue

@@ -238,7 +238,7 @@ const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'o
 const pickerShow = ref<boolean>(false)
 const calendarValue = ref<null | number | number[]>(null)
 const lastCalendarValue = ref<null | number | number[]>(null)
-const panelHeight = ref<number>(338)
+const panelHeight = ref<number>(676)
 const confirmBtnDisabled = ref<boolean>(true)
 const currentTab = ref<number>(0)
 const lastTab = ref<number>(0)
@@ -294,7 +294,7 @@ watch(
       const index = newValue.indexOf('range') > -1 ? rangeTabs.indexOf(newValue) || 0 : tabs.indexOf(newValue)
       currentTab.value = index
     }
-    panelHeight.value = props.showConfirm ? 338 : 400
+    panelHeight.value = props.showConfirm ? 676 : 800
     currentType.value = deepClone(newValue)
   },
   {
@@ -306,7 +306,7 @@ watch(
 watch(
   () => props.showConfirm,
   (val) => {
-    panelHeight.value = val ? 338 : 400
+    panelHeight.value = val ? 676 : 800
   },
   {
     deep: true,

package/components/oxy-calendar-view/monthPanel/index.scss

@@ -8,7 +8,7 @@
     }
 
     @include e(weeks) {
-      box-shadow: 0 8rpx 16rpx 0 rgba(255, 255, 255, 0.02);
+      box-shadow: $-calendar-panel-shadow-dark;
       color: $-dark-color;
     }
 
@@ -25,18 +25,17 @@
   font-size: $-calendar-fs;
 
   @include e(title) {
-    padding: 10rpx 0;
+    padding: 16rpx 24rpx;
     text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
-    padding: $-calendar-panel-padding;
   }
 
   @include e(weeks) {
     display: flex;
     height: $-calendar-week-height;
     line-height: $-calendar-week-height;
-    box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
+    box-shadow: $-calendar-panel-shadow-light;
     color: $-calendar-week-color;
     font-size: $-calendar-week-fs;
     padding: $-calendar-panel-padding;
@@ -54,7 +53,7 @@
 
   @include e(time) {
     display: flex;
-    box-shadow: 0 -8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
+    box-shadow: $-calendar-panel-shadow-reverse-light;
   }
 
   @include e(time-label) {