oxy-uni-ui 2.0.0 → 2.1.0

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

@@ -72,7 +72,7 @@
   }
 
   @include e(actions) {
-    padding: 16rpx 0;
+    padding: 20rpx 0;
     max-height: 50vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -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;
   }
@@ -203,7 +203,7 @@
     width: $-action-sheet-panel-img-fs;
     height: $-action-sheet-panel-img-fs;
     margin: 0 auto;
-    margin-bottom: 14rpx;
+    margin-bottom: 16rpx;
     border-radius: $-action-sheet-panel-img-radius;
   }
 

package/components/oxy-backtop/index.scss

@@ -20,6 +20,6 @@
   }
 
   @include when(square) {
-    border-radius: 8rpx;
+    border-radius: $-backtop-square-radius;
   }
-}
+}

package/components/oxy-button/index.scss

@@ -97,7 +97,7 @@
   }
 
   @include e(loading) {
-    margin-right: 10rpx;
+    margin-right: 12rpx;
     animation: oxy-rotate 0.8s linear infinite;
     animation-duration: 2s;
   }
@@ -194,7 +194,7 @@
 
 
   @include when(round) {
-    border-radius: 1998rpx;
+    border-radius: $-button-round-radius;
   }
 
   @include when(text) {

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) {
@@ -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: 24rpx;
+      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-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) {

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

@@ -58,7 +58,7 @@
     }
 
     @include when(selected) {
-      color: #fff;
+      color: $-calendar-selected-color;
 
       .oxy-year__month-text {
         border-radius: $-calendar-active-border;

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

@@ -5,7 +5,7 @@
   @include b(year-panel) {
     @include e(title) {
       color: $-dark-color;
-      box-shadow: 0 8rpx 16rpx 0 rgba(255, 255,255, 0.02);
+      box-shadow: $-calendar-panel-shadow-dark;
     }
   }
 }
@@ -15,10 +15,10 @@
   padding: $-calendar-panel-padding;
 
   @include e(title) {
-    padding: 10rpx 0;
+    padding: 16rpx 0;
     text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
-    box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
+    box-shadow: $-calendar-panel-shadow-light;
   }
 }

package/components/oxy-cell/index.scss

@@ -109,7 +109,7 @@
   }
 
   @include e(label) {
-    margin-top: 4rpx;
+    margin-top: 8rpx;
     font-size: $-cell-label-fs;
     color: $-cell-label-color;
   }

package/components/oxy-checkbox/index.scss

@@ -39,16 +39,16 @@
 
       @include when(button) {
         .oxy-checkbox__label {
-          border-color: #c8c9cc;
-          background: #3a3a3c;
+          border-color: $-color-gray-5;
+          background: $-dark-border-color;
           color: $-dark-color-gray;
         }
 
         @include when(checked) {
           .oxy-checkbox__label {
-            border-color: #c8c9cc;
-            background: #3a3a3c;
-            color: #c8c9cc;
+            border-color: $-color-gray-5;
+            background: $-dark-border-color;
+            color: $-color-gray-5;
           }
         }
       }
@@ -115,7 +115,7 @@
   @include e(txt) {
     display: inline-block;
     vertical-align: middle;
-    line-height: 40rpx;
+    line-height: 48rpx;
     @include lineEllipsis;
   }
 
@@ -211,7 +211,7 @@
       height: $-checkbox-button-height;
       font-size: $-checkbox-button-font-size;
       margin-left: 0;
-      padding: 10rpx 30rpx;
+      padding: 16rpx 32rpx;
       border: 1px solid $-checkbox-button-border;
       background-color: $-checkbox-button-bg;
       border-radius: $-checkbox-button-radius;
@@ -276,11 +276,11 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-box) {
-    padding: 26rpx 30rpx;
+    padding: 32rpx 32rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 28rpx 30rpx;
+      padding: 32rpx 32rpx;
     }
   }
 

package/components/oxy-checkbox-group/index.scss

@@ -9,10 +9,10 @@
 @include b(checkbox-group) {
   background-color: $-checkbox-bg;
 
-  // 上下40rpx 左右30rpx 内部间隔24rpx
+  // 顶部与两侧留白适当放大，避免按钮组在16px基准字号下过于紧凑
   @include when(button) {
     width: 100%;
-    padding: 16rpx 6rpx 40rpx 30rpx;
+    padding: 24rpx 32rpx 40rpx 32rpx;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-col-picker/index.scss

@@ -95,7 +95,7 @@
 
   @include e(selected-line) {
     position: absolute;
-    bottom: 10rpx;
+    bottom: 12rpx;
     width: $-col-picker-line-width;
     left: 0;
     height: $-col-picker-line-height;
@@ -141,13 +141,13 @@
   }
 
   @include e(list-item-tip) {
-    margin-top: 4rpx;
+    margin-top: 8rpx;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
 
   @include e(confirm) {
-    padding: 24rpx 50rpx 28rpx;
+    padding: 28rpx 52rpx 32rpx;
   }
 
   @include edeep(checked) {

package/components/oxy-corner/index.scss

@@ -240,7 +240,7 @@
         bottom: 0;
         width: 32rpx;
         height: 64rpx;
-        background-color: #ffffff;
+        background-color: $-color-white;
         transform: skewX(30deg);
       }
       .oxy-corner__text {

package/components/oxy-datetime-picker/index.scss

@@ -85,7 +85,7 @@
   }
 
   @include edeep(popup) {
-    border-radius: 32rpx 32rpx 0 0;
+    border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
   }
 
   @include e(wraper) {
@@ -110,7 +110,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 48rpx 30rpx 28rpx 30rpx;
+    padding: 48rpx 32rpx 32rpx 32rpx;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -135,7 +135,7 @@
     display: inline-block;
     color: $-picker-region-color;
     text-align: center;
-    padding: 28rpx 0;
+    padding: 32rpx 0;
     font-size: $-picker-region-fs;
     line-height: 32rpx;
     transition: all 0.15s ease-out;
@@ -147,8 +147,8 @@
   }
 
   @include e(region-time) {
-    font-size: 32rpx;
-    margin-top: 4rpx;
+    font-size: $-picker-region-time-fs;
+    margin-top: 8rpx;
   }
 
   @include e(hidden) {

package/components/oxy-drop-menu/index.scss

@@ -26,7 +26,7 @@
   @include e(list) {
     display: flex;
     text-align: center;
-    background-color: #fff;
+    background-color: $-drop-menu-bg;
   }
 
   @include e(item) {
@@ -85,6 +85,6 @@
 
   @include edeep(arrow) {
     font-size: $-drop-menu-arrow-fs;
-    margin-left: 4rpx;
+    margin-left: 8rpx;
   }
-}
+}

package/components/oxy-drop-menu-item/index.scss

@@ -60,7 +60,7 @@
     position: fixed;
     left: 0;
     right: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: $-drop-menu-modal-bg;
     height: 100%;
   }
-}
+}

package/components/oxy-file-list/index.scss

@@ -20,7 +20,7 @@
     width: 100%;
     height: 100%;
     border: 1px solid $-color-border;
-    border-radius: 16rpx;
+    border-radius: $-file-list-card-radius;
     position: relative;
   }
   @include e(picture) {
@@ -28,7 +28,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: 16rpx;
+    border-radius: $-file-list-card-radius;
   }
   @include e(icon) {
     width: 64rpx;
@@ -37,11 +37,11 @@
   @include e(name) {
     display: block;
     width: 100%;
-    font-size: $-upload-file-fs;
-    color: $-upload-file-color;
-    padding: 0 8rpx;
+    font-size: $-file-list-file-name-fs;
+    color: $-file-list-file-name-color;
+    padding: 0 12rpx;
     text-align: center;
-    margin-top: 16rpx;
+    margin-top: 20rpx;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,16 +59,16 @@
     margin: 0;
     .oxy-file-list__list--item {
       width: 100%;
-      background: #f8f9ff;
-      padding: 16rpx 24rpx;
-      border-radius: 8rpx;
+      background: $-file-list-bg;
+      padding: 20rpx 24rpx;
+      border-radius: $-file-list-list-item-radius;
       display: flex;
       flex-direction: row;
       align-items: center;
       .oxy-file-list__icon {
         width: 48rpx;
         height: 48rpx;
-        margin-right: 16rpx;
+        margin-right: 20rpx;
       }
       .oxy-file-list__name {
         flex: 1;
@@ -77,27 +77,27 @@
         padding: 0;
       }
       .oxy-file-list__download {
-        font-size: 36rpx;
-        color: $-cell-arrow-color;
+        font-size: $-file-list-action-icon-size;
+        color: $-file-list-action-icon-color;
       }
       .oxy-file-list__delete {
-        font-size: 36rpx;
-        color: $-cell-arrow-color;
+        font-size: $-file-list-action-icon-size;
+        color: $-file-list-action-icon-color;
         margin-left: 24rpx;
       }
       & + .oxy-file-list__list--item {
-        margin-top: 16rpx;
+        margin-top: 20rpx;
       }
     }
   }
 
   .oxy-file-list__download-btn {
     position: absolute;
-    top: 12rpx;
-    right: 12rpx;
-    background: rgba(0, 0, 0, 0.45);
-    border-radius: 12rpx;
-    padding: 8rpx 10rpx;
+    top: 16rpx;
+    right: 16rpx;
+    background: $-file-list-download-bg;
+    border-radius: $-file-list-card-radius;
+    padding: 12rpx 16rpx;
     display: flex;
   }
   .oxy-file-list__download {

package/components/oxy-guidance/index.scss

@@ -13,18 +13,18 @@
       box-sizing: content-box;
       height: 100%;
       width: 100%;
-      border: 1px dashed #fff;
-      border-radius: 8rpx;
+      border: 1px dashed $-guide-highlight-border-color;
+      border-radius: $-guide-highlight-radius;
       position: absolute;
       top: -8rpx;
       left: -8rpx;
-      padding: 6rpx;
+      padding: 8rpx;
     }
 
     @include e(arrow) {
       height: 20rpx;
       width: 20rpx;
-      background: #1cbbb4;
+      background: $-guide-tip-bg;
       position: absolute;
       top: 144rpx;
       left: 45%;
@@ -34,14 +34,14 @@
 
     @include e(tips) {
       width: 400rpx;
-      box-shadow: 0 4rpx 18rpx 0 rgba(0, 0, 0, 0.1);
-      color: #fff;
+      box-shadow: $-guide-tip-shadow;
+      color: $-guide-tip-color;
       position: absolute;
       top: 152rpx;
       z-index: 10001;
-      padding: 15rpx 20rpx;
-      font-size: 28rpx;
-      border-radius: 12rpx;
+      padding: 16rpx 20rpx;
+      font-size: $-fs-content;
+      border-radius: $-guide-tip-radius;
       text-align: justify;
 
       @include e(tool-btn) {
@@ -52,14 +52,14 @@
         margin-top: 20rpx;
 
         @include e(next) {
-          background: #fff;
+          background: $-guide-tip-action-bg;
           height: 48rpx;
           width: 100rpx;
           text-align: center;
-          border-radius: 8rpx;
-          color: #666;
+          border-radius: $-guide-tip-action-radius;
+          color: $-guide-tip-action-color;
           line-height: 48rpx;
-          font-size: 24rpx
+          font-size: $-fs-secondary;
         }
       }
     }