oxy-uni-ui 2.0.0 → 2.1.1

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/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-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)
 }
 

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

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