oxy-uni-ui 1.2.0 → 2.0.0

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;
   }

package/components/oxy-cell/index.scss

@@ -40,7 +40,7 @@
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
   width: 100%;
-  overflow: hidden;
+  // overflow: hidden;
 
   @include when(border) {
     .oxy-cell__wrapper {
@@ -54,7 +54,7 @@
     padding: $-cell-wrapper-padding $-cell-padding $-cell-wrapper-padding 0;
     justify-content: space-between;
     align-items: flex-start;
-    overflow: hidden;
+    // overflow: hidden;
 
     @include when(vertical) {
       display: block;
@@ -109,7 +109,7 @@
   }
 
   @include e(label) {
-    margin-top: 2px;
+    margin-top: 4rpx;
     font-size: $-cell-label-fs;
     color: $-cell-label-color;
   }
@@ -134,15 +134,15 @@
     font-size: $-cell-value-fs;
     color: $-cell-value-color;
     vertical-align: middle;
-    
+
     @include m(left) {
       text-align: left;
     }
-    
+
     @include m(right) {
       text-align: right;
     }
-    
+
     @include m(ellipsis) {
       @include lineEllipsis;
       min-width: 0;
@@ -151,7 +151,7 @@
 
   @include edeep(arrow-right) {
     display: block;
-    margin-left: 8px;
+    margin-left: 16rpx;
     width: $-cell-arrow-size;
     font-size: $-cell-arrow-size;
     color: $-cell-arrow-color;
@@ -203,4 +203,4 @@
       align-items: center;
     }
   }
-}
+}

package/components/oxy-cell/oxy-cell.vue

@@ -7,7 +7,7 @@
     @click="onClick"
   >
     <view :class="['oxy-cell__wrapper', vertical ? 'is-vertical' : '']">
-      <view v-if="showLeft" class="oxy-cell__left" :style="titleWidth ? 'min-width:' + titleWidth + ';max-width:' + titleWidth + ';' : ''">
+      <view v-if="showLeft" class="oxy-cell__left" :style="leftStyle">
         <text v-if="isRequired && markerSide === 'before'" class="oxy-cell__required oxy-cell__required--left">*</text>
         <!--左侧icon部位-->
         <slot name="icon">
@@ -65,7 +65,7 @@ import { useCell } from '../composables/useCell'
 import { useParent } from '../composables/useParent'
 import { FORM_KEY } from '../oxy-form/types'
 import { cellProps } from './types'
-import { isDef } from '../common/util'
+import { isDef, objToStyle } from '../common/util'
 
 const props = defineProps(cellProps)
 const emit = defineEmits(['click'])
@@ -116,6 +116,19 @@ const showLeft = computed(() => {
   return hasIcon || hasTitle || hasLabel
 })
 
+const leftStyle = computed(() => {
+  const leftStyle: Record<string, any> = {}
+  if (props.titleWidth) {
+    leftStyle['min-width'] = props.titleWidth
+    leftStyle['max-width'] = props.titleWidth
+  }
+  if (props.titlePercent) {
+    leftStyle['flex'] = 'none'
+    leftStyle['width'] = props.titlePercent
+  }
+  return objToStyle(leftStyle)
+})
+
 /**
  * @description 点击cell的handle
  */

package/components/oxy-cell/types.ts

@@ -53,6 +53,10 @@ export const cellProps = {
    * 设置左侧标题宽度
    */
   titleWidth: String,
+  /**
+   * 设置左侧标题占比
+   */
+  titlePercent: String,
   /**
    * 是否垂直居中，默认顶部居中
    */

package/components/oxy-checkbox/index.scss

@@ -73,7 +73,7 @@
   margin-bottom: $-checkbox-margin;
   font-size: 0;
   -webkit-tap-highlight-color: transparent;
-  line-height: 1.2;
+  // line-height: 1.2;
 
   @include when(last-child) {
     margin-bottom: 0;
@@ -84,7 +84,7 @@
     display: inline-block;
     width: $-checkbox-size;
     height: $-checkbox-size;
-    border: 2px solid $-checkbox-border-color;
+    border: 4rpx solid $-checkbox-border-color;
     border-radius: 50%;
     color: $-checkbox-check-color;
     background: $-checkbox-bg;
@@ -108,14 +108,14 @@
   @include edeep(btn-check) {
     display: inline-block;
     font-size: $-checkbox-icon-size;
-    margin-right: 4px;
+    margin-right: 8rpx;
     vertical-align: middle;
   }
 
   @include e(txt) {
     display: inline-block;
     vertical-align: middle;
-    line-height: 20px;
+    line-height: 40rpx;
     @include lineEllipsis;
   }
 
@@ -211,7 +211,7 @@
       height: $-checkbox-button-height;
       font-size: $-checkbox-button-font-size;
       margin-left: 0;
-      padding: 5px 15px;
+      padding: 10rpx 30rpx;
       border: 1px solid $-checkbox-button-border;
       background-color: $-checkbox-button-bg;
       border-radius: $-checkbox-button-radius;
@@ -276,18 +276,18 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-box) {
-    padding: 13px 15px;
+    padding: 26rpx 30rpx;
     margin: 0;
 
     @include when(large) {
-      padding: 14px 15px;
+      padding: 28rpx 30rpx;
     }
   }
 
   @include when(button-box) {
     display: inline-flex;
     width: 33.3333%;
-    padding: 12px 12px 0 0;
+    padding: 24rpx 24rpx 0 0;
     box-sizing: border-box;
 
     .oxy-checkbox__label {

package/components/oxy-checkbox/oxy-checkbox.vue

@@ -14,8 +14,8 @@
       :class="`oxy-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
       :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
     >
-      <oxy-icon custom-class="oxy-checkbox__indeterminate" name="decrease" />
-      <oxy-icon custom-class="oxy-checkbox__check" name="check-bold" />
+      <oxy-icon v-if="indeterminate" custom-class="oxy-checkbox__indeterminate" name="decrease" />
+      <oxy-icon v-else custom-class="oxy-checkbox__check" name="check-bold" />
     </view>
     <!--shape为button时只保留oxy-checkbox__label-->
     <view

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

@@ -9,10 +9,10 @@
 @include b(checkbox-group) {
   background-color: $-checkbox-bg;
 
-  // 上下20px 左右15px 内部间隔12px
+  // 上下40rpx 左右30rpx 内部间隔24rpx
   @include when(button) {
     width: 100%;
-    padding: 8px 3px 20px 15px;
+    padding: 16rpx 6rpx 40rpx 30rpx;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-circle/oxy-circle.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
-import { addUnit, isObj, objToStyle, uuid } from '../common/util'
+import { isObj, objToStyle, unitConvert, unitConvertWithDefault, withDefaultUnit, uuid } from '../common/util'
 import { circleProps } from './types'
 // #ifdef MP-WEIXIN
 import { canvas2dAdapter } from '../common/canvasHelper'
@@ -55,10 +55,12 @@ const interval = ref<any>(null) // 定时器
 const pixelRatio = ref<number>(1) // 像素比
 const canvasId = ref<string>(`oxy-circle${uuid()}`) // canvasId
 let ctx: UniApp.CanvasContext | null = null
+const toNumber = (value: number | string | null | undefined) => unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+const toPx = (value: number | string | null | undefined) => unitConvert(withDefaultUnit(value, 'rpx'), 0, { output: 'px' })
 
 // canvas渲染大小
 const canvasSize = computed(() => {
-  let size = props.size
+  let size = toNumber(props.size)
   // #ifdef MP-ALIPAY
   size = size * pixelRatio.value
   // #endif
@@ -68,7 +70,7 @@ const canvasSize = computed(() => {
 
 // 进度条宽度
 const sWidth = computed(() => {
-  let sWidth = props.strokeWidth
+  let sWidth = toNumber(props.strokeWidth)
   // #ifdef MP-ALIPAY
   sWidth = sWidth * pixelRatio.value
   // #endif
@@ -78,8 +80,8 @@ const sWidth = computed(() => {
 // Circle 样式
 const canvasStyle = computed(() => {
   const style = {
-    width: addUnit(props.size),
-    height: addUnit(props.size)
+    width: toPx(props.size),
+    height: toPx(props.size)
   }
   return `${objToStyle(style)}`
 })
@@ -148,8 +150,9 @@ function getContext() {
         if (res && res.node) {
           const canvas = res.node
           ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
-          canvas.width = props.size * pixelRatio.value
-          canvas.height = props.size * pixelRatio.value
+          const size = toNumber(props.size)
+          canvas.width = size * pixelRatio.value
+          canvas.height = size * pixelRatio.value
           ctx.scale(pixelRatio.value, pixelRatio.value)
           resolve(ctx)
         }

package/components/oxy-circle/types.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
 // 进度条端点的形状，可选值为 "butt" | "round" | "square"
 export type StrokeLinecapType = 'butt' | 'round' | 'square'
@@ -11,9 +11,9 @@ export const circleProps = {
    */
   modelValue: makeNumberProp(0),
   /**
-   * 圆环直径，默认单位为 px
+   * 圆环直径，支持 number / string（如 `200rpx`、`100px`），number 与纯数字字符串按 rpx 处理
    */
-  size: makeNumberProp(100),
+  size: makeNumericProp(200),
   /**
    * 进度条颜色，传入对象格式可以定义渐变色
    */
@@ -38,9 +38,9 @@ export const circleProps = {
    */
   text: String,
   /**
-   * 进度条宽度 单位px
+   * 进度条宽度，支持 number / string（如 `20rpx`、`10px`），number 与纯数字字符串按 rpx 处理
    */
-  strokeWidth: makeNumberProp(10),
+  strokeWidth: makeNumericProp(20),
   /**
    * 进度条端点的形状，可选值为 "butt" | "round" | "square"
    */

package/components/oxy-col/oxy-col.vue

@@ -20,14 +20,14 @@ import { computed, watch } from 'vue'
 import { useParent } from '../composables/useParent'
 import { ROW_KEY } from '../oxy-row/types'
 import { colProps } from './types'
-import { isDef } from '../common/util'
+import { isDef, withDefaultUnit } from '../common/util'
 
 const props = defineProps(colProps)
 const { parent: row } = useParent(ROW_KEY)
 
 const rootStyle = computed(() => {
   const gutter = isDef(row) ? row.props.gutter || 0 : 0
-  const padding = `${gutter / 2}px`
+  const padding = withDefaultUnit(gutter / 2)
   const style = gutter > 0 ? `padding-left: ${padding}; padding-right: ${padding};background-clip: content-box;` : ''
   return `${style}${props.customStyle}`
 })

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

@@ -95,7 +95,7 @@
 
   @include e(selected-line) {
     position: absolute;
-    bottom: 5px;
+    bottom: 10rpx;
     width: $-col-picker-line-width;
     left: 0;
     height: $-col-picker-line-height;
@@ -141,18 +141,18 @@
   }
 
   @include e(list-item-tip) {
-    margin-top: 2px;
+    margin-top: 4rpx;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
 
   @include e(confirm) {
-    padding: 12px 25px 14px;
+    padding: 24rpx 50rpx 28rpx;
   }
 
   @include edeep(checked) {
     display: block;
-    margin-left: 4px;
+    margin-left: 8rpx;
     font-size: $-col-picker-list-checked-icon-size;
     color: $-col-picker-list-color-checked;
     opacity: 0;

package/components/oxy-col-picker/oxy-col-picker.vue

@@ -36,6 +36,7 @@
       :title="title || translate('title')"
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
+      :max-width="popupMaxWidth"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :root-portal="rootPortal"
       @open="handlePickerOpend"
@@ -106,7 +107,7 @@ import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyActionSheet from '../oxy-action-sheet/oxy-action-sheet.vue'
 import OxyCell from '../oxy-cell/oxy-cell.vue'
 import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, type ComponentPublicInstance, reactive } from 'vue'
-import { addUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle, unitConvert } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { colPickerProps, type ColPickerExpose } from './types'
 
@@ -294,6 +295,9 @@ function showPicker() {
   const { disabled, readonly } = props
 
   if (disabled || readonly) return
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
   pickerShow.value = true
   lastPickerColSelected.value = pickerColSelected.value.slice(0)
   lastSelectList.value = selectList.value.slice(0)
@@ -450,15 +454,15 @@ function setLineStyle(animation: boolean = true) {
     .then((rects) => {
       const lineStyle: CSSProperties = {}
       if (isDef(lineWidth)) {
-        lineStyle.width = addUnit(lineWidth)
+        lineStyle.width = withDefaultUnit(lineWidth)
       }
       if (isDef(lineHeight)) {
-        lineStyle.height = addUnit(lineHeight)
-        lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+        lineStyle.height = withDefaultUnit(lineHeight)
+        lineStyle.borderRadius = `calc(${withDefaultUnit(lineHeight)} / 2)`
       }
       const rect = rects[currentCol.value]
       let left = rects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
-      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+      lineStyle.transform = `translateX(${unitConvert(left, 0, { output: 'px' })}) translateX(-50%)`
 
       if (animation) {
         lineStyle.transition = 'width 300ms ease, transform 300ms ease'

package/components/oxy-col-picker/types.ts

@@ -100,6 +100,11 @@ export const colPickerProps = {
    * 弹窗层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否显示确定按钮
    */
@@ -129,11 +134,11 @@ export const colPickerProps = {
    */
   rules: makeArrayProp<FormItemRule>(),
   /**
-   * 底部条宽度，单位像素
+   * 底部条宽度，支持 `px/rpx`
    */
   lineWidth: numericProp,
   /**
-   * 底部条高度，单位像素
+   * 底部条高度，支持 `px/rpx`
    */
   lineHeight: numericProp,
   /**
@@ -152,7 +157,11 @@ export const colPickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 
 export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>

package/components/oxy-collapse/index.scss

@@ -31,14 +31,14 @@
   @include e(more) {
     display: inline-block;
     font-size: $-collapse-retract-fs;
-    margin-top: 8px;
+    margin-top: 16rpx;
     color: $-collapse-more-color;
     user-select: none;
   }
   @include e(more-txt) {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 4px;
+    margin-right: 8rpx;
   }
   @include e(arrow) {
     display: inline-block;

package/components/oxy-collapse-item/oxy-collapse-item.vue

@@ -32,7 +32,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, pause, uuid } from '../common/util'
+import { getRect, isArray, isDef, isPromise, isString, objToStyle, pause, unitConvert, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
 import { COLLAPSE_KEY } from '../oxy-collapse/types'
 import { collapseItemProps, type CollapseItemExpose } from './types'
@@ -64,9 +64,9 @@ const contentStyle = computed(() => {
     style.transition = 'height 0.3s ease-in-out'
   }
   if (!expanded.value) {
-    style.height = '0px'
+    style.height = '0'
   } else if (height.value) {
-    style.height = addUnit(height.value)
+    style.height = unitConvert(height.value, 0, { output: 'px' })
   }
   return objToStyle(style)
 })