oxy-uni-ui 2.1.0 → 2.1.2

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/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);
 
@@ -111,7 +111,7 @@
       line-height: initial;
     }
   }
-  
+
   @include edeep(action-loading){
     width: $-action-sheet-loading-size;
     height: $-action-sheet-loading-size;
@@ -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: 16rpx;
+    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,7 +16,7 @@
   }
 
   @include when(circle) {
-    border-radius: 50%;
+    border-radius: $-radius-circle;
   }
 
   @include when(square) {

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;
@@ -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) {
@@ -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

@@ -71,7 +71,7 @@
   }
 
   @include edeep(tag) {
-    margin-right: 16rpx;
+    margin-right: $-spacing-16;
   }
 
   @include e(view) {
@@ -91,7 +91,7 @@
     font-size: $-fs-content;
 
     @include when(monthrange) {
-      padding-bottom: 24rpx;
+      padding-bottom: $-spacing-24;
       box-shadow: $-calendar-panel-shadow-light;
     }
   }

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/month-panel.vue

@@ -8,27 +8,34 @@
     </view>
     <scroll-view
       :class="`oxy-month-panel__container ${!!timeType ? 'oxy-month-panel__container--time' : ''}`"
-      :style="`height: ${unitConvert(scrollHeight, 0, { output: 'px' })}`"
+      :style="`height: ${scrollHeight}px`"
       scroll-y
       @scroll="monthScroll"
       :scroll-top="scrollTop"
     >
-      <view v-for="(item, index) in months" :key="index" :id="`month${index}`">
-        <month
-          :type="type"
-          :date="item.date"
-          :value="value"
-          :min-date="minDate"
-          :max-date="maxDate"
-          :first-day-of-week="firstDayOfWeek"
-          :formatter="formatter"
-          :max-range="maxRange"
-          :range-prompt="rangePrompt"
-          :allow-same-day="allowSameDay"
-          :default-time="defaultTime"
-          :showTitle="index !== 0"
-          @change="handleDateChange"
-        />
+      <view class="oxy-month-panel__list" :style="`height: ${totalHeight}px; position: relative;`">
+        <view
+          v-for="item in visibleMonths"
+          :key="item.date"
+          :id="`month${item.index}`"
+          :style="`position: absolute; top: ${item.top}px; width: 100%;`"
+        >
+          <month
+            :type="type"
+            :date="item.date"
+            :value="value"
+            :min-date="minDate"
+            :max-date="maxDate"
+            :first-day-of-week="firstDayOfWeek"
+            :formatter="formatter"
+            :max-range="maxRange"
+            :range-prompt="rangePrompt"
+            :allow-same-day="allowSameDay"
+            :default-time="defaultTime"
+            :showTitle="item.index !== 0"
+            @change="handleDateChange"
+          />
+        </view>
       </view>
     </scroll-view>
     <view v-if="timeType" class="oxy-month-panel__time">
@@ -65,10 +72,23 @@ export default {
 import OxyPickerView from '../../oxy-picker-view/oxy-picker-view.vue'
 import { computed, ref, watch, onMounted } from 'vue'
 import { debounce, isArray, isEqual, isNumber, pause, unitConvert } from '../../common/util'
-import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
+import {
+  compareMonth,
+  formatMonthTitle,
+  getMonthEndDay,
+  getMonths,
+  getTimeData,
+  getWeekLabel,
+  designPxToRuntimePx,
+  MONTH_ROW_HEIGHT,
+  MONTH_ROW_GAP,
+  MONTH_TITLE_HEIGHT,
+  TIME_PICKER_HEIGHT
+} from '../utils'
 import Month from '../month/month.vue'
 import { monthPanelProps, type MonthInfo, type MonthPanelTimeType, type MonthPanelExpose } from './types'
 import { useTranslate } from '../../composables/useTranslate'
+import { useDynamicVirtualScroll } from '../../composables/useDynamicVirtualScroll'
 import type { CalendarItem } from '../types'
 
 const props = defineProps(monthPanelProps)
@@ -77,18 +97,13 @@ const emit = defineEmits(['change', 'pickstart', 'pickend'])
 const { translate } = useTranslate('calendar-view')
 
 const scrollTop = ref<number>(0) // 滚动位置
+const currentScrollTop = ref<number>(0) // 当前虚拟渲染滚动位置
 const scrollIndex = ref<number>(0) // 当前显示的月份索引
 const timeValue = ref<number[]>([]) // 当前选中的时分秒
 
 const timeType = ref<MonthPanelTimeType>('') // 当前时间类型，是开始还是结束
 const innerValue = ref<string | number | (number | null)[]>('') // 内部保存一个值，用于判断新老值，避免监听器触发
 
-const designPxToRuntimePx = (designPx: number): number => unitConvert(`${designPx * 2}rpx`)
-const MONTH_ROW_HEIGHT = designPxToRuntimePx(64)
-const MONTH_ROW_GAP = designPxToRuntimePx(4)
-const MONTH_TITLE_HEIGHT = designPxToRuntimePx(45)
-const TIME_PICKER_HEIGHT = designPxToRuntimePx(125)
-
 const handleChange = debounce((value) => {
   emit('change', {
     value
@@ -139,23 +154,44 @@ const weekLabel = computed(() => {
 // 滚动区域的高度
 const scrollHeight = computed(() => {
   const panelHeight = designPxToRuntimePx(props.panelHeight)
-  const scrollHeight: number = timeType.value ? panelHeight - TIME_PICKER_HEIGHT : panelHeight
+  const scrollHeight: number = panelHeight - (props.showPanelTitle ? MONTH_TITLE_HEIGHT : 0) - (timeType.value ? TIME_PICKER_HEIGHT : 0)
   return scrollHeight
 })
 
 // 月份日期和月份高度
 const months = computed<MonthInfo[]>(() => {
+  let top = 0
   return getMonths(props.minDate, props.maxDate).map((month, index) => {
     const offset = (7 + new Date(month).getDay() - props.firstDayOfWeek) % 7
     const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
     const rows = Math.ceil((offset + totalDay) / 7)
+    const height = rows * MONTH_ROW_HEIGHT + (rows - 1) * MONTH_ROW_GAP + (index === 0 ? 0 : MONTH_TITLE_HEIGHT)
+    const currentTop = top
+    top += height
     return {
-      height: rows * MONTH_ROW_HEIGHT + (rows - 1) * MONTH_ROW_GAP + (index === 0 ? 0 : MONTH_TITLE_HEIGHT),
+      height,
+      top: currentTop,
       date: month
     }
   })
 })
 
+const totalHeight = computed(() => {
+  if (months.value.length === 0) return 0
+  const last = months.value[months.value.length - 1]
+  return last.top + last.height
+})
+
+// 滚动区域的高度（用于计算可视区域）
+const viewportHeight = computed(() => designPxToRuntimePx(props.panelHeight))
+
+// 引入动态虚拟滚动 Hook
+const { visibleData: visibleMonths, getTargetIndex } = useDynamicVirtualScroll<MonthInfo>({
+  data: months,
+  scrollTop: currentScrollTop,
+  viewportHeight
+})
+
 watch(
   () => props.type,
   (val) => {
@@ -229,8 +265,13 @@ async function scrollIntoView() {
   }
   scrollTop.value = 0
   if (top > 0) {
+    const targetTop = top + (activeMonthIndex > 0 && compareMonth(months.value[0].date, activeDate) !== 0 ? MONTH_TITLE_HEIGHT : 0)
+    currentScrollTop.value = targetTop
+    // 在首次渲染前同步 currentScrollTop，避免闪烁
+    scrollTop.value = targetTop
     await pause()
-    scrollTop.value = top + (activeMonthIndex > 0 ? MONTH_TITLE_HEIGHT : 0)
+  } else {
+    currentScrollTop.value = 0
   }
 }
 /**
@@ -351,8 +392,9 @@ const monthScroll = (event: { detail: { scrollTop: number } }) => {
   if (months.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)
 }
 
 /**
@@ -360,14 +402,7 @@ const monthScroll = (event: { detail: { scrollTop: number } }) => {
  * scrollTop 滚动条位置
  */
 function doSetSubtitle(scrollTop: number) {
-  let height: number = 0 // 月份高度和
-  for (let index = 0; index < months.value.length; index++) {
-    height = height + months.value[index].height
-    if (scrollTop < height) {
-      scrollIndex.value = index
-      return
-    }
-  }
+  scrollIndex.value = getTargetIndex(scrollTop)
 }
 
 defineExpose<MonthPanelExpose>({

package/components/oxy-calendar-view/monthPanel/types.ts

@@ -8,25 +8,67 @@ import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../typ
 export interface MonthInfo {
   date: number
   height: number
+  top: number
 }
 
 export const monthPanelProps = {
+  /**
+   * 日期类型
+   */
   type: makeRequiredProp(String as PropType<CalendarType>),
+  /**
+   * 选中值
+   */
   value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  /**
+   * 最小日期时间戳
+   */
   minDate: makeRequiredProp(Number),
+  /**
+   * 最大日期时间戳
+   */
   maxDate: makeRequiredProp(Number),
+  /**
+   * 一周的第一天
+   */
   firstDayOfWeek: makeRequiredProp(Number),
+  /**
+   * 格式化函数
+   */
   formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * 最大范围限制
+   */
   maxRange: Number,
+  /**
+   * 超出范围提示
+   */
   rangePrompt: String,
+  /**
+   * 是否允许选择同一天
+   */
   allowSameDay: makeBooleanProp(false),
+  /**
+   * 是否展示面板标题
+   */
   showPanelTitle: makeBooleanProp(false),
+  /**
+   * 默认时间
+   */
   defaultTime: {
     type: [Array] as PropType<Array<number[]>>
   },
+  /**
+   * 面板高度
+   */
   panelHeight: makeRequiredProp(Number),
-  // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+  /**
+   * 用于过滤时间选择器的数据
+   */
   timeFilter: Function as PropType<CalendarTimeFilter>,
+  /**
+   * 是否隐藏秒
+   */
   hideSecond: makeBooleanProp(false),
   /**
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。

package/components/oxy-calendar-view/types.ts

@@ -53,7 +53,7 @@ export const calendarViewProps = {
   /**
    * 可滚动面板的高度
    */
-  panelHeight: makeNumberProp(378),
+  panelHeight: makeNumberProp(756),
   /**
    * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
    */

package/components/oxy-calendar-view/utils.ts

@@ -1,10 +1,21 @@
 import { computed } from 'vue'
 import dayjs from '../../dayjs'
-import { isArray, isFunction, padZero } from '../common/util'
+import { isArray, isFunction, padZero, unitConvert } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import type { CalendarDayType, CalendarItem, CalendarTimeFilter, CalendarType } from './types'
 const { translate } = useTranslate('calendar-view')
 
+export const designPxToRuntimePx = (designPx: number): number => unitConvert(`${designPx}rpx`)
+export const MONTH_ROW_HEIGHT = designPxToRuntimePx(128)
+export const MONTH_ROW_GAP = designPxToRuntimePx(8)
+export const MONTH_TITLE_HEIGHT = designPxToRuntimePx(90)
+export const YEAR_TITLE_HEIGHT = designPxToRuntimePx(90)
+export const TIME_PICKER_HEIGHT = designPxToRuntimePx(250)
+export const PANEL_EXTRA_WITH_TITLE = designPxToRuntimePx(52)
+export const PANEL_EXTRA_NO_TITLE = designPxToRuntimePx(32)
+export const YEAR_HEIGHT_WITHOUT_TITLE = MONTH_ROW_HEIGHT * 3 + MONTH_ROW_GAP * 2
+export const YEAR_HEIGHT_WITH_TITLE = YEAR_HEIGHT_WITHOUT_TITLE + YEAR_TITLE_HEIGHT
+
 const weeks = computed(() => {
   return [
     translate('weeks.sun'),

package/components/oxy-calendar-view/yearPanel/types.ts

@@ -3,26 +3,60 @@ import { makeBooleanProp, makeRequiredProp } from '../../common/props'
 import type { CalendarFormatter, CalendarType } from '../types'
 
 /**
- * 月份信息
+ * 年份信息
  */
 export interface YearInfo {
   date: number
   height: number
+  top: number
 }
 
 export const yearPanelProps = {
+  /**
+   * 日期类型
+   */
   type: makeRequiredProp(String as PropType<CalendarType>),
-  value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
+  /**
+   * 选中值
+   */
+  value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  /**
+   * 最小日期时间戳
+   */
   minDate: makeRequiredProp(Number),
+  /**
+   * 最大日期时间戳
+   */
   maxDate: makeRequiredProp(Number),
+  /**
+   * 格式化函数
+   */
   formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * 最大范围限制
+   */
   maxRange: Number,
+  /**
+   * 超出范围提示
+   */
   rangePrompt: String,
+  /**
+   * 是否允许选择同一天
+   */
   allowSameDay: makeBooleanProp(false),
+  /**
+   * 是否展示标题
+   */
   showPanelTitle: makeBooleanProp(false),
+  /**
+   * 默认时间
+   */
   defaultTime: {
     type: [Array] as PropType<Array<number[]>>
   },
+  /**
+   * 面板高度
+   */
   panelHeight: makeRequiredProp(Number)
 }