oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-backtop/index.scss

@@ -4,8 +4,8 @@
 @include b(backtop) {
   position: fixed;
   background-color: $-backtop-bg;
-  width: 40px;
-  height: 40px;
+  width: 80rpx;
+  height: 80rpx;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -20,6 +20,6 @@
   }
 
   @include when(square) {
-    border-radius: 4px;
+    border-radius: 8rpx;
   }
 }

package/components/oxy-backtop/oxy-backtop.vue

@@ -1,10 +1,6 @@
 <template>
   <oxy-transition :show="show" name="fade">
-    <view
-      :class="`oxy-backtop ${customClass} is-${shape}`"
-      :style="`z-index: ${zIndex}; bottom: ${bottom}px; right: ${right}px; ${customStyle}`"
-      @click="handleBacktop"
-    >
+    <view :class="`oxy-backtop ${customClass} is-${shape}`" :style="rootStyle" @click="handleBacktop">
       <slot v-if="$slots.default"></slot>
       <oxy-icon v-else custom-class="oxy-backtop__backicon" name="backtop" :custom-style="iconStyle" />
     </view>
@@ -26,11 +22,18 @@ export default {
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { computed } from 'vue'
+import { unitConvertWithDefault, withDefaultUnit } from '../common/util'
 import { backtopProps } from './types'
 
 const props = defineProps(backtopProps)
 
-const show = computed(() => props.scrollTop > props.top)
+const thresholdTop = computed(() => unitConvertWithDefault(props.top, { defaultUnit: 'rpx' }))
+const show = computed(() => props.scrollTop > thresholdTop.value)
+const rootStyle = computed(() => {
+  return `z-index: ${props.zIndex}; bottom: ${withDefaultUnit(props.bottom, 'rpx')}; right: ${withDefaultUnit(props.right, 'rpx')}; ${
+    props.customStyle
+  }`
+})
 
 function handleBacktop() {
   uni.pageScrollTo({

package/components/oxy-backtop/types.ts

@@ -1,4 +1,4 @@
-import { baseProps, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import { baseProps, makeNumberProp, makeNumericProp, makeRequiredProp, makeStringProp } from '../common/props'
 
 export const backtopProps = {
   ...baseProps,
@@ -7,9 +7,9 @@ export const backtopProps = {
    */
   scrollTop: makeRequiredProp(Number),
   /**
-   * 距离顶部多少距离时显示
+   * 距离顶部多少距离时显示，支持 `px/rpx`；number 或纯数字字符串按 `rpx` 处理
    */
-  top: makeNumberProp(300),
+  top: makeNumericProp(600),
   /**
    * 返回顶部滚动时间
    */
@@ -27,11 +27,11 @@ export const backtopProps = {
    */
   shape: makeStringProp('circle'),
   /**
-   * 距离屏幕底部距离
+   * 距离屏幕底部距离，支持 `px/rpx`；number 或纯数字字符串按 `rpx` 处理
    */
-  bottom: makeNumberProp(100),
+  bottom: makeNumericProp(200),
   /**
-   * 距离屏幕右边距离
+   * 距离屏幕右边距离，支持 `px/rpx`；number 或纯数字字符串按 `rpx` 处理
    */
-  right: makeNumberProp(20)
+  right: makeNumericProp(40)
 }

package/components/oxy-badge/index.scss

@@ -22,7 +22,7 @@
     line-height: $-badge-height;
     padding: $-badge-padding;
     background-color: $-badge-bg;
-    border-radius: calc($-badge-height / 2 + 2px);
+    border-radius: calc($-badge-height / 2 + 4rpx);
     color: $-badge-color;
     font-size: $-badge-fs;
     text-align: center;
@@ -32,8 +32,8 @@
 
     @include when(fixed) {
       position: absolute;
-      top: 0px;
-      right: 0px;
+      top: 0;
+      right: 0;
       transform: translateY(-50%) translateX(50%);
     }
 
@@ -60,4 +60,4 @@
       }
     }
   }
-}
+}

package/components/oxy-badge/oxy-badge.vue

@@ -23,7 +23,7 @@ export default {
 <script lang="ts" setup>
 import { computed, type CSSProperties } from 'vue'
 import { badgeProps } from './types'
-import { addUnit, isDef, isNumber, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, isNumber, objToStyle } from '../common/util'
 
 const props = defineProps(badgeProps)
 const content = computed(() => {
@@ -43,11 +43,11 @@ const contentStyle = computed(() => {
   }
 
   if (isDef(props.top)) {
-    style.top = addUnit(props.top)
+    style.top = withDefaultUnit(props.top)
   }
 
   if (isDef(props.right)) {
-    style.right = addUnit(props.right)
+    style.right = withDefaultUnit(props.right)
   }
   return objToStyle(style)
 })

package/components/oxy-badge/types.ts

@@ -29,11 +29,11 @@ export const badgeProps = {
    */
   type: makeStringProp<BadgeType | undefined>(undefined),
   /**
-   * 为正时，角标向下偏移对应的像素
+   * 为正时，角标向下偏移距离，支持 `px/rpx`
    */
   top: numericProp,
   /**
-   * 为正时，角标向左偏移对应的像素
+   * 为正时，角标向左偏移距离，支持 `px/rpx`
    */
   right: numericProp
 }

package/components/oxy-button/index.scss

@@ -97,7 +97,7 @@
   }
 
   @include e(loading) {
-    margin-right: 5px;
+    margin-right: 10rpx;
     animation: oxy-rotate 0.8s linear infinite;
     animation-duration: 2s;
   }
@@ -154,7 +154,7 @@
     padding: $-button-medium-padding;
     border-radius: $-button-medium-radius;
     font-size: $-button-medium-fs;
-    min-width: 120px;
+    min-width: 240rpx;
 
 
     @include when(round) {
@@ -194,13 +194,13 @@
 
 
   @include when(round) {
-    border-radius: 999px;
+    border-radius: 1998rpx;
   }
 
   @include when(text) {
     color: $-button-primary-bg-color;
     min-width: 0;
-    padding: 4px 0;
+    padding: 8rpx 0;
 
     &::after {
       display: none;
@@ -314,7 +314,7 @@
 
   @include edeep(icon) {
     display: block;
-    margin-right: 6px;
+    margin-right: 12rpx;
     font-size: $-button-icon-fs;
     vertical-align: middle;
   }

package/components/oxy-button/oxy-button.vue

@@ -17,7 +17,7 @@
     ]"
     :hover-start-time="hoverStartTime"
     :hover-stay-time="hoverStayTime"
-    :open-type="disabled || loading ? undefined : openType"
+    :open-type="openTypeValue"
     :send-message-title="sendMessageTitle"
     :send-message-path="sendMessagePath"
     :send-message-img="sendMessageImg"
@@ -98,6 +98,10 @@ const loadingStyle = computed(() => {
   return `background-image: url(${loadingIconSvg.value});`
 })
 
+const openTypeValue = computed(() => {
+  return (props.disabled || props.loading ? undefined : props.openType) as any
+})
+
 watch(
   () => props.loading,
   () => {

package/components/oxy-calendar/index.scss

@@ -61,25 +61,25 @@
   }
 
   @include e(tabs) {
-    width: 222px;
-    margin: 10px auto 12px;
+    width: 444rpx;
+    margin: 20rpx auto 24rpx;
   }
 
   @include e(shortcuts) {
-    padding: 20px 0;
+    padding: 40rpx 0;
     text-align: center;
   }
 
   @include edeep(tag) {
-    margin-right: 8px;
+    margin-right: 16rpx;
   }
 
   @include e(view) {
     @include when(show-confirm) {
-      height: 394px;
+      height: 788rpx;
 
       @include when(range) {
-        height: 384px;
+        height: 768rpx;
       }
     }
   }
@@ -88,11 +88,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 14px;
+    font-size: 28rpx;
 
     @include when(monthrange) {
-      padding-bottom: 10px;
-      box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+      padding-bottom: 20rpx;
+      box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
     }
   }
 
@@ -106,12 +106,12 @@
   }
 
   @include e(range-sperator) {
-    margin: 0 24px;
+    margin: 0 48rpx;
     color: rgba(0, 0, 0, 0.25);
   }
 
   @include e(confirm) {
-    padding: 12px 25px 14px;
+    padding: 24rpx 50rpx 28rpx;
   }
 
   @include edeep(cell) {

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

@@ -43,6 +43,7 @@
       :close-on-click-modal="closeOnClickModal"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :z-index="zIndex"
+      :max-width="popupMaxWidth"
       :root-portal="rootPortal"
       @close="close"
     >

package/components/oxy-calendar/types.ts

@@ -107,6 +107,11 @@ export const calendarProps = {
    * 弹框层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否显示确定按钮
    */

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

@@ -26,7 +26,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 45px;
+    height: 90rpx;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
   }
@@ -142,7 +142,7 @@
 
   @include e(day-top) {
     position: absolute;
-    top: 10px;
+    top: 20rpx;
     left: 0;
     right: 0;
     line-height: 1.1;
@@ -152,11 +152,11 @@
 
   @include e(day-bottom) {
     position: absolute;
-    bottom: 10px;
+    bottom: 20rpx;
     left: 0;
     right: 0;
     line-height: 1.1;
     font-size: $-calendar-info-fs;
     text-align: center;
   }
-}
+}

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

@@ -3,18 +3,54 @@ import { makeBooleanProp, makeRequiredProp } from '../../common/props'
 import type { CalendarFormatter, CalendarType } from '../types'
 
 export const monthProps = {
+  /**
+   * 日历选择类型
+   */
   type: makeRequiredProp(String as PropType<CalendarType>),
+  /**
+   * 当前月份时间戳
+   */
   date: makeRequiredProp(Number),
+  /**
+   * 已选中的值
+   */
   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),
+  /**
+   * 默认时间配置
+   */
   defaultTime: {
     type: [Array] as PropType<Array<number[]>>
   },
+  /**
+   * 是否显示标题
+   */
   showTitle: makeBooleanProp(true)
 }

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

@@ -8,7 +8,7 @@
     }
 
     @include e(weeks) {
-      box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
+      box-shadow: 0 8rpx 16rpx 0 rgba(255, 255, 255, 0.02);
       color: $-dark-color;
     }
 
@@ -25,7 +25,7 @@
   font-size: $-calendar-fs;
 
   @include e(title) {
-    padding: 5px 0;
+    padding: 10rpx 0;
     text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
@@ -36,7 +36,7 @@
     display: flex;
     height: $-calendar-week-height;
     line-height: $-calendar-week-height;
-    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
     color: $-calendar-week-color;
     font-size: $-calendar-week-fs;
     padding: $-calendar-panel-padding;
@@ -54,7 +54,7 @@
 
   @include e(time) {
     display: flex;
-    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02);
+    box-shadow: 0 -8rpx 16rpx 0 rgba(0, 0, 0, 0.02);
   }
 
   @include e(time-label) {
@@ -62,13 +62,13 @@
     flex: 1;
     font-size: $-picker-column-fs;
     text-align: center;
-    line-height: 125px;
+    line-height: 250rpx;
     color: $-picker-column-color;
 
     &::after {
       position: absolute;
       content: '';
-      height: 35px;
+      height: 70rpx;
       top: 50%;
       left: 0;
       right: 0;
@@ -86,4 +86,4 @@
   @include e(time-picker) {
     flex: 3;
   }
-}
+}

package/components/oxy-calendar-view/monthPanel/month-panel.vue

@@ -8,7 +8,7 @@
     </view>
     <scroll-view
       :class="`oxy-month-panel__container ${!!timeType ? 'oxy-month-panel__container--time' : ''}`"
-      :style="`height: ${scrollHeight}px`"
+      :style="`height: ${unitConvert(scrollHeight, 0, { output: 'px' })}`"
       scroll-y
       @scroll="monthScroll"
       :scroll-top="scrollTop"
@@ -64,7 +64,7 @@ export default {
 <script lang="ts" setup>
 import OxyPickerView from '../../oxy-picker-view/oxy-picker-view.vue'
 import { computed, ref, watch, onMounted } from 'vue'
-import { debounce, isArray, isEqual, isNumber, pause } from '../../common/util'
+import { debounce, isArray, isEqual, isNumber, pause, unitConvert } from '../../common/util'
 import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
 import Month from '../month/month.vue'
 import { monthPanelProps, type MonthInfo, type MonthPanelTimeType, type MonthPanelExpose } from './types'
@@ -83,6 +83,12 @@ 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
@@ -132,7 +138,8 @@ const weekLabel = computed(() => {
 
 // 滚动区域的高度
 const scrollHeight = computed(() => {
-  const scrollHeight: number = timeType.value ? props.panelHeight - 125 : props.panelHeight
+  const panelHeight = designPxToRuntimePx(props.panelHeight)
+  const scrollHeight: number = timeType.value ? panelHeight - TIME_PICKER_HEIGHT : panelHeight
   return scrollHeight
 })
 
@@ -143,7 +150,7 @@ const months = computed<MonthInfo[]>(() => {
     const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
     const rows = Math.ceil((offset + totalDay) / 7)
     return {
-      height: rows * 64 + (rows - 1) * 4 + (index === 0 ? 0 : 45), // 每行64px高度,除最后一行外每行加4px margin,加上标题45px
+      height: rows * MONTH_ROW_HEIGHT + (rows - 1) * MONTH_ROW_GAP + (index === 0 ? 0 : MONTH_TITLE_HEIGHT),
       date: month
     }
   })
@@ -214,8 +221,8 @@ async function scrollIntoView() {
       const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
       const offset = (7 + firstDay.getDay() - props.firstDayOfWeek) % 7
       const row = Math.floor((offset + day - 1) / 7)
-      // 每行高度64px,每行加4px margin
-      top += row * 64 + row * 4
+      // 每行高度与行间距按 rpx 基线换算为运行时 px
+      top += row * (MONTH_ROW_HEIGHT + MONTH_ROW_GAP)
       break
     }
     top += months.value[index] ? Number(months.value[index].height) : 0
@@ -223,8 +230,7 @@ async function scrollIntoView() {
   scrollTop.value = 0
   if (top > 0) {
     await pause()
-    // 如果不是第一个月才加45
-    scrollTop.value = top + (activeMonthIndex > 0 ? 45 : 0)
+    scrollTop.value = top + (activeMonthIndex > 0 ? MONTH_TITLE_HEIGHT : 0)
   }
 }
 /**

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

@@ -27,7 +27,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 45px;
+    height: 90rpx;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
   }
@@ -133,7 +133,7 @@
 
   @include e(month-top) {
     position: absolute;
-    top: 10px;
+    top: 20rpx;
     left: 0;
     right: 0;
     line-height: 1.1;
@@ -143,11 +143,11 @@
 
   @include e(month-bottom) {
     position: absolute;
-    bottom: 10px;
+    bottom: 20rpx;
     left: 0;
     right: 0;
     line-height: 1.1;
     font-size: $-calendar-info-fs;
     text-align: center;
   }
-}
+}

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

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

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

@@ -1,7 +1,13 @@
 <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: ${scrollHeight}px`" scroll-y @scroll="yearScroll" :scroll-top="scrollTop">
+    <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"
@@ -34,7 +40,7 @@ export default {
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue'
 import { compareYear, formatYearTitle, getYears } from '../utils'
-import { isArray, isNumber, pause } from '../../common/util'
+import { isArray, isNumber, pause, unitConvert } from '../../common/util'
 import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
@@ -44,9 +50,19 @@ const emit = defineEmits(['change'])
 const scrollTop = 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 scrollHeight: number = props.panelHeight + (props.showPanelTitle ? 26 : 16)
+  const panelHeight = designPxToRuntimePx(props.panelHeight)
+  const scrollHeight: number = panelHeight + (props.showPanelTitle ? PANEL_EXTRA_WITH_TITLE : PANEL_EXTRA_NO_TITLE)
   return scrollHeight
 })
 
@@ -55,7 +71,7 @@ const years = computed<YearInfo[]>(() => {
   return getYears(props.minDate, props.maxDate).map((year, index) => {
     return {
       date: year,
-      height: index === 0 ? 200 : 245
+      height: index === 0 ? YEAR_HEIGHT_WITHOUT_TITLE : YEAR_HEIGHT_WITH_TITLE
     }
   })
 })
@@ -92,7 +108,7 @@ async function scrollIntoView() {
   scrollTop.value = 0
   if (top > 0) {
     await pause()
-    scrollTop.value = top + 45
+    scrollTop.value = top + YEAR_TITLE_HEIGHT
   }
 }
 

package/components/oxy-card/index.scss

@@ -31,7 +31,7 @@
   border-radius: $-card-radius;
   box-shadow: $-card-shadow-color;
   font-size: $-card-fs;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 
   @include when(rectangle) {
     margin-left: 0;
@@ -56,7 +56,7 @@
     }
   }
   @include e(title-content) {
-    padding: 16px 0;
+    padding: 32rpx 0;
     color: $-card-title-color;
     font-size: $-card-title-fs;
   }