oxy-uni-ui 2.1.0 → 2.1.2

package/components/oxy-calendar-view/yearPanel/year-panel.vue

@@ -1,28 +1,24 @@
 <template>
   <view class="oxy-year-panel">
     <view v-if="showPanelTitle" class="oxy-year-panel__title">{{ title }}</view>
-    <scroll-view
-      class="oxy-year-panel__container"
-      :style="`height: ${unitConvert(scrollHeight, 0, { output: 'px' })}`"
-      scroll-y
-      @scroll="yearScroll"
-      :scroll-top="scrollTop"
-    >
-      <view v-for="(item, index) in years" :key="index" :id="`year${index}`">
-        <year
-          :type="type"
-          :date="item.date"
-          :value="value"
-          :min-date="minDate"
-          :max-date="maxDate"
-          :max-range="maxRange"
-          :formatter="formatter"
-          :range-prompt="rangePrompt"
-          :allow-same-day="allowSameDay"
-          :default-time="defaultTime"
-          :showTitle="index !== 0"
-          @change="handleDateChange"
-        />
+    <scroll-view class="oxy-year-panel__container" :style="`height: ${scrollHeight}px`" scroll-y @scroll="yearScroll" :scroll-top="scrollTop">
+      <view class="oxy-year-panel__list" :style="`height: ${totalHeight}px; position: relative;`">
+        <view v-for="item in visibleYears" :key="item.date" :id="`year${item.index}`" :style="`position: absolute; top: ${item.top}px; width: 100%;`">
+          <year
+            :type="type"
+            :date="item.date"
+            :value="value"
+            :min-date="minDate"
+            :max-date="maxDate"
+            :max-range="maxRange"
+            :formatter="formatter"
+            :range-prompt="rangePrompt"
+            :allow-same-day="allowSameDay"
+            :default-time="defaultTime"
+            :showTitle="item.index !== 0"
+            @change="handleDateChange"
+          />
+        </view>
       </view>
     </scroll-view>
   </view>
@@ -39,8 +35,19 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue'
-import { compareYear, formatYearTitle, getYears } from '../utils'
+import {
+  compareYear,
+  formatYearTitle,
+  getYears,
+  designPxToRuntimePx,
+  YEAR_HEIGHT_WITH_TITLE,
+  YEAR_HEIGHT_WITHOUT_TITLE,
+  PANEL_EXTRA_NO_TITLE,
+  PANEL_EXTRA_WITH_TITLE,
+  YEAR_TITLE_HEIGHT
+} from '../utils'
 import { isArray, isNumber, pause, unitConvert } from '../../common/util'
+import { useDynamicVirtualScroll } from '../../composables/useDynamicVirtualScroll'
 import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
@@ -48,34 +55,47 @@ const props = defineProps(yearPanelProps)
 const emit = defineEmits(['change'])
 
 const scrollTop = ref<number>(0) // 滚动位置
+const currentScrollTop = ref<number>(0) // 当前虚拟渲染滚动位置
 const scrollIndex = ref<number>(0) // 当前显示的年份索引
 
-const designPxToRuntimePx = (designPx: number): number => unitConvert(`${designPx * 2}rpx`)
-const YEAR_MONTH_HEIGHT = designPxToRuntimePx(64)
-const YEAR_MONTH_GAP = designPxToRuntimePx(4)
-const YEAR_TITLE_HEIGHT = designPxToRuntimePx(45)
-const PANEL_EXTRA_WITH_TITLE = designPxToRuntimePx(26)
-const PANEL_EXTRA_NO_TITLE = designPxToRuntimePx(16)
-const YEAR_HEIGHT_WITHOUT_TITLE = YEAR_MONTH_HEIGHT * 3 + YEAR_MONTH_GAP * 2
-const YEAR_HEIGHT_WITH_TITLE = YEAR_HEIGHT_WITHOUT_TITLE + YEAR_TITLE_HEIGHT
-
 // 滚动区域的高度
 const scrollHeight = computed(() => {
   const panelHeight = designPxToRuntimePx(props.panelHeight)
-  const scrollHeight: number = panelHeight + (props.showPanelTitle ? PANEL_EXTRA_WITH_TITLE : PANEL_EXTRA_NO_TITLE)
+  const scrollHeight: number = panelHeight - (props.showPanelTitle ? YEAR_TITLE_HEIGHT : 0)
   return scrollHeight
 })
 
 // 年份信息
 const years = computed<YearInfo[]>(() => {
+  let top = 0
   return getYears(props.minDate, props.maxDate).map((year, index) => {
+    const height = index === 0 ? YEAR_HEIGHT_WITHOUT_TITLE : YEAR_HEIGHT_WITH_TITLE
+    const currentTop = top
+    top += height
     return {
       date: year,
-      height: index === 0 ? YEAR_HEIGHT_WITHOUT_TITLE : YEAR_HEIGHT_WITH_TITLE
+      height,
+      top: currentTop
     }
   })
 })
 
+const totalHeight = computed(() => {
+  if (years.value.length === 0) return 0
+  const last = years.value[years.value.length - 1]
+  return last.top + last.height
+})
+
+// 滚动区域的高度（用于计算可视区域）
+const viewportHeight = computed(() => designPxToRuntimePx(props.panelHeight))
+
+// 引入动态虚拟滚动 Hook
+const { visibleData: visibleYears, getTargetIndex } = useDynamicVirtualScroll<YearInfo>({
+  data: years,
+  scrollTop: currentScrollTop,
+  viewportHeight
+})
+
 // 标题
 const title = computed(() => {
   return formatYearTitle(years.value[scrollIndex.value].date)
@@ -107,8 +127,13 @@ async function scrollIntoView() {
   }
   scrollTop.value = 0
   if (top > 0) {
+    const targetTop = top + (activeDate && compareYear(years.value[0].date, activeDate) !== 0 ? YEAR_TITLE_HEIGHT : 0)
+    currentScrollTop.value = targetTop
+    // 在首次渲染前同步 currentScrollTop，避免闪烁
+    scrollTop.value = targetTop
     await pause()
-    scrollTop.value = top + YEAR_TITLE_HEIGHT
+  } else {
+    currentScrollTop.value = 0
   }
 }
 
@@ -116,8 +141,9 @@ const yearScroll = (event: { detail: { scrollTop: number } }) => {
   if (years.value.length <= 1) {
     return
   }
-  const scrollTop = Math.max(0, event.detail.scrollTop)
-  doSetSubtitle(scrollTop)
+  const st = Math.max(0, event.detail.scrollTop)
+  currentScrollTop.value = st
+  doSetSubtitle(st)
 }
 
 /**
@@ -125,14 +151,7 @@ const yearScroll = (event: { detail: { scrollTop: number } }) => {
  * scrollTop 滚动条位置
  */
 function doSetSubtitle(scrollTop: number) {
-  let height: number = 0 // 月份高度和
-  for (let index = 0; index < years.value.length; index++) {
-    height = height + years.value[index].height
-    if (scrollTop < height) {
-      scrollIndex.value = index
-      return
-    }
-  }
+  scrollIndex.value = getTargetIndex(scrollTop)
 }
 
 function handleDateChange({ value }: { value: number[] }) {

package/components/oxy-card/index.scss

@@ -5,7 +5,7 @@
     background-color: $-dark-background2;
 
     @include when(rectangle) {
-  
+
       .oxy-card__content {
         @include halfPixelBorder('top', 0, $-dark-border-color);
       }
@@ -31,7 +31,7 @@
   border-radius: $-card-radius;
   box-shadow: $-card-shadow-color;
   font-size: $-card-fs;
-  margin-bottom: 24rpx;
+  margin-bottom: $-spacing-24;
 
   @include when(rectangle) {
     margin-left: 0;
@@ -40,7 +40,7 @@
     box-shadow: none;
 
     .oxy-card__title-content {
-      font-size: $-card-fs;
+      font-size: $-card-title-fs;
     }
     .oxy-card__content {
       position: relative;
@@ -68,4 +68,4 @@
     padding: $-card-footer-padding;
     text-align: right;
   }
-} 
+}

package/components/oxy-cell/index.scss

@@ -151,7 +151,7 @@
 
   @include edeep(arrow-right) {
     display: block;
-    margin-left: 16rpx;
+    margin-left: $-spacing-16;
     width: $-cell-arrow-size;
     font-size: $-cell-arrow-size;
     color: $-cell-arrow-color;

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

@@ -44,7 +44,7 @@
     font-size: $-cell-group-title-fs;
     color: $-cell-group-title-color;
     font-weight: $-fw-medium;
-    line-height: 1.43;
+    line-height: $-line-height-loose;
   }
   @include e(right) {
     color: $-cell-group-value-color;
@@ -53,4 +53,4 @@
   @include e(body) {
     background: $-color-white;
   }
-}
+}

package/components/oxy-checkbox/index.scss

@@ -1,102 +1,45 @@
-@import './../common/abstracts/_mixin.scss';
-@import './../common/abstracts/variable.scss';
-
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
 .oxy-theme-dark {
   @include b(checkbox) {
     @include e(shape) {
-      background: transparent;
-      border-color: $-checkbox-border-color;
-      color: $-checkbox-check-color;
+      background-color: $-dark-background;
+      border-color: $-color-gray-6;
     }
-
-    @include e(label) {
+    @include e(txt) {
       color: $-dark-color;
     }
-
-    @include when(disabled) {
-      .oxy-checkbox__shape {
-        border-color: $-dark-color-gray;
-        background: $-dark-background4;
-      }
-
-      .oxy-checkbox__label {
-        color: $-dark-color-gray;
-      }
-
-      :deep(.oxy-checkbox__check) {
-        color: $-dark-color-gray;
-      }
-
-      @include when(checked) {
-        .oxy-checkbox__shape {
-          color: $-dark-color-gray;
-        }
-
-        .oxy-checkbox__label {
-          color: $-dark-color-gray;
-        }
-      }
-
-      @include when(button) {
-        .oxy-checkbox__label {
-          border-color: $-color-gray-5;
-          background: $-dark-border-color;
-          color: $-dark-color-gray;
-        }
-
-        @include when(checked) {
-          .oxy-checkbox__label {
-            border-color: $-color-gray-5;
-            background: $-dark-border-color;
-            color: $-color-gray-5;
-          }
-        }
-      }
-    }
-
-    @include when(button) {
-      .oxy-checkbox__label {
-        background-color: $-dark-background;
-      }
-
-      @include when(checked) {
-        .oxy-checkbox__label {
-          background-color: $-dark-background2;
-        }
-      }
+    @include e(label) {
+      color: $-dark-color3;
     }
   }
 }
-
 @include b(checkbox) {
   display: block;
   margin-bottom: $-checkbox-margin;
-  font-size: 0;
   -webkit-tap-highlight-color: transparent;
   // line-height: 1.2;
-
   @include when(last-child) {
     margin-bottom: 0;
   }
-
   @include e(shape) {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: $-checkbox-size;
     height: $-checkbox-size;
     border: 4rpx solid $-checkbox-border-color;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     color: $-checkbox-check-color;
     background: $-checkbox-bg;
     vertical-align: middle;
     transition: background 0.2s;
     box-sizing: border-box;
-
     @include when(square) {
       border-radius: $-checkbox-square-radius;
     }
   }
-
   @include e(input) {
     position: absolute;
     width: 0;
@@ -104,21 +47,22 @@
     margin: 0;
     opacity: 0;
   }
-
+  @include edeep(check, indeterminate) {
+    font-size: $-checkbox-icon-size;
+  }
   @include edeep(btn-check) {
     display: inline-block;
     font-size: $-checkbox-icon-size;
     margin-right: 8rpx;
     vertical-align: middle;
+    color: currentColor;
   }
-
   @include e(txt) {
     display: inline-block;
     vertical-align: middle;
-    line-height: 48rpx;
+    line-height: $-lh-base;
     @include lineEllipsis;
   }
-
   @include e(label) {
     position: relative;
     display: inline-block;
@@ -127,62 +71,14 @@
     font-size: $-checkbox-label-fs;
     color: $-checkbox-label-color;
   }
-
-  @include edeep(check) {
-    color: $-checkbox-check-color;
-    font-size: $-checkbox-icon-size;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  @include edeep(indeterminate) {
-    color: $-checkbox-check-color;
-    font-size: $-checkbox-icon-size;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  @include when(indeterminate) {
-    .oxy-checkbox__shape {
-      color: $-checkbox-checked-color;
-      background: currentColor;
-      border-color: currentColor;
-    }
-
-    :deep(.oxy-checkbox__indeterminate) {
-      opacity: 1;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-    :deep(.oxy-checkbox__check) {
-      display: none;
-    }
-  }
-
-  @include when(checked) {
-    .oxy-checkbox__shape {
-      display: inline-block;
-      color: $-checkbox-checked-color;
-      background: currentColor;
-      border-color: currentColor;
-    }
-
-    :deep(.oxy-checkbox__check) {
-      opacity: 1;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    :deep(.oxy-checkbox__indeterminate) {
-      display: none;
+  @include e(icon) {
+    background: $-color-white;
+    border-radius: $-checkbox-square-radius;
+    @include when(icon-checked) {
+      background: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
     }
   }
-
-
   @include when(button) {
     display: inline-block;
     margin-bottom: 0;
@@ -194,41 +90,45 @@
       margin-right: 0;
     }
 
-    .oxy-checkbox__shape {
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      opacity: 0;
-      border: none;
-    }
-
     .oxy-checkbox__label {
-      display: inline-flex;
-      flex-direction: row;
-      justify-content: center;
+      display: flex;
       align-items: center;
-      min-width: $-checkbox-button-min-width;
+      justify-content: center;
       height: $-checkbox-button-height;
-      font-size: $-checkbox-button-font-size;
-      margin-left: 0;
+      min-width: $-checkbox-button-min-width;
       padding: 16rpx 32rpx;
+      margin-left: 0;
       border: 1px solid $-checkbox-button-border;
-      background-color: $-checkbox-button-bg;
-      border-radius: $-checkbox-button-radius;
-      transition: color 0.2s, border 0.2s;
       box-sizing: border-box;
+      border-radius: $-checkbox-button-radius;
+      background: $-checkbox-button-bg;
+      transition: all 0.2s;
+      line-height: 1.2;
+      text-align: center;
+    }
+    @include when(disabled) {
+      .oxy-checkbox__label {
+        border-color: $-checkbox-button-disabled-border;
+        color: $-checkbox-disabled-label-color;
+      }
     }
-
     @include when(checked) {
       .oxy-checkbox__label {
-        color: $-checkbox-checked-color;
-        background-color: $-checkbox-bg;
         border-color: $-checkbox-checked-color;
-        border-color: currentColor;
+        background: $-color-white;
+        color: $-checkbox-checked-color;
+      }
+    }
+    @include when(checked) {
+      @include when(disabled) {
+        .oxy-checkbox__label {
+          border-color: $-checkbox-disabled-check-bg;
+          background: $-checkbox-disabled-check-bg;
+          color: $-checkbox-disabled-check-color;
+        }
       }
     }
   }
-
   @include when(inline) {
     display: inline-block;
     margin-bottom: 0;
@@ -238,78 +138,68 @@
       margin-right: 0;
     }
   }
-
-  @include when(disabled) {
-    .oxy-checkbox__shape {
-      border-color: $-checkbox-border-color;
-      background: $-checkbox-disabled-check-bg;
-    }
-
-    .oxy-checkbox__label {
-      color: $-checkbox-disabled-label-color;
-    }
-
-    @include when(checked) {
-      .oxy-checkbox__shape {
-        color: $-checkbox-disabled-check-color;
-      }
-
-      .oxy-checkbox__label {
-        color: $-checkbox-disabled-label-color;
-      }
-    }
-
-    @include when(button) {
-      .oxy-checkbox__label {
-        background: $-checkbox-disabled-color;
-        border-color: $-checkbox-button-border;
-        color: $-checkbox-disabled-label-color;
-      }
-
-      @include when(checked) {
-        .oxy-checkbox__label {
-          border-color: $-checkbox-button-disabled-border;
-        }
-      }
-    }
-  }
-
-  // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-box) {
+    display: inline-block;
     padding: 32rpx 32rpx;
+    width: 33.3333%;
     margin: 0;
-
+    box-sizing: border-box;
+    font-size: 0;
     @include when(large) {
       padding: 32rpx 32rpx;
     }
+    @include when(checked) {
+      color: $-checkbox-checked-color;
+    }
   }
-
-  @include when(button-box) {
+  &.is-cell-box.is-button-box {
     display: inline-flex;
     width: 33.3333%;
+    margin-right: 0;
     padding: 24rpx 24rpx 0 0;
     box-sizing: border-box;
 
     .oxy-checkbox__label {
       width: 100%;
-    }
-
-    &:last-child::after {
-      content: '';
-      display: table;
-      clear: both;
+      max-width: inherit;
     }
   }
-
   @include when(large) {
     .oxy-checkbox__shape {
       width: $-checkbox-large-size;
       height: $-checkbox-large-size;
-      font-size: $-checkbox-large-size;
     }
-
     .oxy-checkbox__label {
       font-size: $-checkbox-large-label-fs;
     }
+    @include edeep(check, indeterminate, btn-check) {
+      font-size: $-checkbox-large-icon-size;
+    }
+  }
+  @include when(checked) {
+    .oxy-checkbox__shape {
+      background-color: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
+    }
+    .oxy-checkbox__icon {
+      background: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
+    }
+  }
+  @include when(indeterminate) {
+    .oxy-checkbox__shape {
+      background-color: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
+    }
+  }
+  @include when(disabled) {
+    .oxy-checkbox__shape {
+      border-color: $-checkbox-disabled-check-bg;
+      background: $-checkbox-disabled-color;
+      color: $-checkbox-disabled-check-color;
+    }
+    .oxy-checkbox__label {
+      color: $-checkbox-disabled-label-color;
+    }
   }
 }

package/components/oxy-collapse/index.scss

@@ -31,7 +31,7 @@
   @include e(more) {
     display: inline-block;
     font-size: $-collapse-retract-fs;
-    margin-top: 16rpx;
+    margin-top: $-spacing-16;
     color: $-collapse-more-color;
     user-select: none;
   }

package/components/oxy-collapse-item/index.scss

@@ -59,7 +59,7 @@
     display: block;
     font-size: $-collapse-arrow-size;
     color: $-collapse-arrow-color;
-    transition: transform 0.3s;
+    transition: transform $-transition-duration-slow;
 
     @include when(retract) {
       transform: rotate(-180deg);
@@ -76,7 +76,7 @@
     color: $-collapse-body-color;
     font-size: $-collapse-body-fs;
     padding: $-collapse-body-padding;
-    line-height: 1.43;
+    line-height: $-line-height-loose;
   }
 
   @include when(disabled) {

package/components/oxy-corner/index.scss

@@ -160,7 +160,7 @@
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 24rpx;
+            padding-right: $-spacing-24;
           }
         }
         &.is-bottom-left{
@@ -177,7 +177,7 @@
             border-bottom-left-radius: 0;
             border-top-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 24rpx;
+            padding-right: $-spacing-24;
             > span{
               transform: none;
             }
@@ -247,7 +247,7 @@
         right: 0;
         top: 0;
         transform: none;
-        padding-left: 24rpx;
+        padding-left: $-spacing-24;
         box-sizing: border-box;
         font-size: $-corner-embedded-font-size;
         font-weight: $-corner-embedded-font-weight;

package/components/oxy-count-to/oxy-count-to.vue

@@ -2,15 +2,15 @@
   <view :class="rootClass">
     <!-- 前缀插槽 -->
     <slot name="prefix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.prefix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}rpx`" :text="props.prefix"></oxy-text>
     </slot>
     <!-- 默认文本插槽 -->
     <slot>
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 2}rpx`" :text="timeText"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize}rpx`" :text="timeText"></oxy-text>
     </slot>
     <!-- 后缀插槽 -->
     <slot name="suffix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.suffix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}rpx`" :text="props.suffix"></oxy-text>
     </slot>
   </view>
 </template>