oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-signature/oxy-signature.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, getRect, isDef, objToStyle, uuid } from '../common/util'
+import { getRect, isDef, objToStyle, unitConvert, unitConvertWithDefault, withDefaultUnit, uuid } from '../common/util'
 import { signatureProps, type SignatureExpose, type SignatureResult, type Point, type Line } from './types'
 import { useTranslate } from '../composables/useTranslate'
 // #ifdef MP-WEIXIN
@@ -147,11 +147,11 @@ watch(
 const canvasStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.width)) {
-    style.width = addUnit(props.width)
+    style.width = unitConvert(withDefaultUnit(props.width, 'rpx'), 0, { output: 'px' })
   }
 
   if (isDef(props.height)) {
-    style.height = addUnit(props.height)
+    style.height = unitConvert(withDefaultUnit(props.height, 'rpx'), 0, { output: 'px' })
   }
 
   return `${objToStyle(style)}`
@@ -159,6 +159,12 @@ const canvasStyle = computed(() => {
 
 const disableScroll = computed(() => props.disableScroll)
 const enableHistory = computed(() => props.enableHistory)
+const resolveStrokeWidth = (value: number | string): number => {
+  return unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+}
+const lineWidthInPx = computed(() => resolveStrokeWidth(props.lineWidth))
+const minWidthInPx = computed(() => resolveStrokeWidth(props.minWidth))
+const maxWidthInPx = computed(() => resolveStrokeWidth(props.maxWidth))
 
 const lines = ref<Line[]>([]) // 保存所有线条
 const redoLines = ref<Line[]>([]) // 保存撤销的线条
@@ -167,22 +173,24 @@ const currentStep = ref(0) // 当前步骤
 
 // 添加计算笔画宽度的方法
 function calculateLineWidth(speed: number): number {
-  if (!props.pressure) return props.lineWidth
+  if (!props.pressure) return lineWidthInPx.value
 
   const minSpeed = props.minSpeed || 1.5
+  const minWidth = Math.min(minWidthInPx.value, maxWidthInPx.value)
+  const maxWidth = Math.max(minWidthInPx.value, maxWidthInPx.value)
   const limitedSpeed = Math.min(minSpeed * 10, Math.max(minSpeed, speed))
-  const addWidth = ((props.maxWidth - props.minWidth) * (limitedSpeed - minSpeed)) / minSpeed
-  const lineWidth = Math.max(props.maxWidth - addWidth, props.minWidth)
-  return Math.min(lineWidth, props.maxWidth)
+  const addWidth = ((maxWidth - minWidth) * (limitedSpeed - minSpeed)) / minSpeed
+  const lineWidth = Math.max(maxWidth - addWidth, minWidth)
+  return Math.min(lineWidth, maxWidth)
 }
 
 /* 获取默认笔画宽度 */
 const getDefaultLineWidth = () => {
   if (props.pressure) {
     // 在压感模式下，使用最大和最小宽度的平均值作为默认值
-    return (props.maxWidth + props.minWidth) / 2
+    return (maxWidthInPx.value + minWidthInPx.value) / 2
   }
-  return props.lineWidth
+  return lineWidthInPx.value
 }
 
 /* 开始画线 */
@@ -469,7 +477,7 @@ function drawSmoothLine(prePoint: Point, point: Point) {
   }
 
   // 计算线宽
-  const lineWidth = point.lineWidth || props.lineWidth
+  const lineWidth = point.lineWidth || lineWidthInPx.value
 
   // 绘制贝塞尔曲线
   if (typeof prePoint.lastX1 === 'number') {

package/components/oxy-signature/types.ts

@@ -1,65 +1,122 @@
 import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
-import { baseProps, numericProp } from '../common/props'
+import { baseProps, makeNumericProp, numericProp } from '../common/props'
 
 export const signatureProps = {
   ...baseProps,
+  /**
+   * 画笔颜色
+   */
   penColor: {
     type: String,
     default: '#000'
   },
-  lineWidth: {
-    type: Number,
-    default: 3
-  },
+  /**
+   * 画笔线宽，支持 number / string（如 '6rpx'、'3px'），number 与纯数字字符串按 rpx 处理
+   */
+  lineWidth: makeNumericProp(6),
+  /**
+   * 清空按钮文案
+   */
   clearText: String,
+  /**
+   * 撤销按钮文案
+   */
   revokeText: String,
+  /**
+   * 恢复按钮文案
+   */
   restoreText: String,
+  /**
+   * 确认按钮文案
+   */
   confirmText: String,
+  /**
+   * 导出图片格式
+   */
   fileType: {
     type: String,
     default: 'png'
   },
+  /**
+   * 导出质量
+   */
   quality: {
     type: Number,
     default: 1
   },
+  /**
+   * 导出缩放比例
+   */
   exportScale: {
     type: Number,
     default: 1
   },
+  /**
+   * 是否禁用签名操作
+   */
   disabled: {
     type: Boolean,
     default: false
   },
+  /**
+   * 画布高度，支持 number / string（如 '600rpx'、'300px'），number 与纯数字字符串按 rpx 处理
+   */
   height: numericProp,
+  /**
+   * 画布宽度，支持 number / string（如 '100%'、'700rpx'），number 与纯数字字符串按 rpx 处理
+   */
   width: numericProp,
+  /**
+   * 画布背景色
+   */
   backgroundColor: String,
+  /**
+   * 是否禁用页面滚动
+   */
   disableScroll: {
     type: Boolean,
     default: true
   },
+  /**
+   * 是否启用历史记录
+   */
   enableHistory: {
     type: Boolean,
     default: false
   },
+  /**
+   * 每次记录步进
+   */
   step: {
     type: Number,
     default: 1
   },
+  /**
+   * 撤销文案
+   */
   undoText: String,
+  /**
+   * 重做文案
+   */
   redoText: String,
+  /**
+   * 是否启用压感
+   */
   pressure: {
     type: Boolean,
     default: false
   },
-  minWidth: {
-    type: Number,
-    default: 2
-  },
-  maxWidth: {
-    type: Number,
-    default: 6
-  },
+  /**
+   * 压感最小线宽，支持 number / string（如 '4rpx'、'2px'），number 与纯数字字符串按 rpx 处理
+   */
+  minWidth: makeNumericProp(4),
+  /**
+   * 压感最大线宽，支持 number / string（如 '12rpx'、'6px'），number 与纯数字字符串按 rpx 处理
+   */
+  maxWidth: makeNumericProp(12),
+  /**
+   * 压感最小速度阈值
+   */
   minSpeed: {
     type: Number,
     default: 1.5
@@ -67,23 +124,59 @@ export const signatureProps = {
 }
 
 export type SignatureResult = {
+  /**
+   * 临时文件路径
+   */
   tempFilePath: string
+  /**
+   * 导出是否成功
+   */
   success: boolean
+  /**
+   * 导出宽度
+   */
   width: number
+  /**
+   * 导出高度
+   */
   height: number
 }
 
 export interface Line {
+  /**
+   * 线段点集合
+   */
   points: Point[]
+  /**
+   * 线段颜色
+   */
   color: string
+  /**
+   * 线段宽度
+   */
   width: number
+  /**
+   * 背景色
+   */
   backgroundColor?: string
+  /**
+   * 是否启用压感
+   */
   isPressure?: boolean
 }
 
 export interface Point {
+  /**
+   * x 坐标
+   */
   x: number
+  /**
+   * y 坐标
+   */
   y: number
+  /**
+   * 时间戳
+   */
   t: number
   speed?: number
   distance?: number

package/components/oxy-skeleton/oxy-skeleton.vue

@@ -24,16 +24,16 @@ import type { CSSProperties } from 'vue'
 import { ref, computed, watch } from 'vue'
 import type { SkeletonRowCol, SkeletonRowColObj } from './types'
 import { skeletonProps } from './types'
-import { isNumber, addUnit } from '../common/util'
+import { isNumber, withDefaultUnit } from '../common/util'
 
 const themeMap = {
-  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
-  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  avatar: [{ type: 'circle', height: '128rpx', width: '128rpx' }],
+  image: [{ type: 'rect', height: '128rpx', width: '128rpx' }],
   text: [
     1,
     [
-      { width: '24%', height: '16px', marginRight: '16px' },
-      { width: '76%', height: '16px' }
+      { width: '24%', height: '32rpx', marginRight: '32rpx' },
+      { width: '76%', height: '32rpx' }
     ]
   ],
   paragraph: [1, 1, 1, { width: '55%' }]
@@ -81,7 +81,7 @@ function getColItemStyle(rowCol: SkeletonRowColObj) {
 
   for (const name of styleName) {
     if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
-      const px = addUnit(rowCol[name])
+      const px = withDefaultUnit(rowCol[name])
 
       if (name === 'size') {
         style.width = px

package/components/oxy-skeleton/types.ts

@@ -36,7 +36,7 @@ export const skeletonProps = {
    * 用于设置行列数量、宽度高度、间距等。
    * @example
    * 【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。
-   * 【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。
+   * 【示例二】，`[1, 1, { width: '200rpx' }]` 表示自定义第三行的宽度为 `200rpx`。
    * 【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
    */
   rowCol: makeArrayProp<SkeletonRowCol>(),

package/components/oxy-slider/index.scss

@@ -41,7 +41,7 @@
     background-color: rgba($color: #fff, $alpha: 0.5);
     border-radius: 100%;
     position: absolute;
-    bottom: calc($-slider-handle-radius * 2 + 8px);
+    bottom: calc($-slider-handle-radius * 2 + 16rpx);
   }
   @include e(bar-wrapper) {
     flex: 1;
@@ -70,7 +70,7 @@
     }
   }
   @include e(has-label) {
-    padding-top: calc($-slider-fs * 1.2 + 8px);
+    padding-top: calc($-slider-fs * 1.2 + 16rpx);
   }
   @include e(button) {
     height: calc($-slider-handle-radius * 2);
@@ -79,7 +79,7 @@
     border-radius: 100%;
     border: 1px solid $-slider-axie-bg;
     box-sizing: border-box;
-    box-shadow: 0 2px 4px 0 rgba($color: #9b9b9b, $alpha: 0.5);
+    box-shadow: 0 4rpx 8rpx 0 rgba($color: #9b9b9b, $alpha: 0.5);
   }
   @include e(label-min) {
     margin-right: calc($-slider-handle-radius * 2);

package/components/oxy-sort-button/index.scss

@@ -20,9 +20,9 @@
       &::after {
         position: absolute;
         content: '';
-        width: 19px;
-        height: 3px;
-        bottom: 6px;
+        width: 38rpx;
+        height: 6rpx;
+        bottom: 12rpx;
         left: 50%;
         transform: translate(-50%, 0);
         background: $-sort-button-line-color;
@@ -61,8 +61,8 @@
 
   @include e(right) {
     display: inline-block;
-    min-width: 14px;
-    margin-left: 2px;
+    min-width: 28rpx;
+    margin-left: 4rpx;
     vertical-align: middle;
     line-height: 1.1;
 
@@ -78,12 +78,12 @@
   @include edeep(icon-up) {
     display: block !important;
     line-height: 1.1;
-    transform: scale(calc((10 / 14))) translate(0, 7px);
+    transform: scale(calc((10 / 14))) translate(0, 14rpx);
   }
 
   @include edeep(icon-down) {
     display: block !important;
     line-height: 1.1;
-    transform: scale(calc((10 / 14))) translate(0, -7px);
+    transform: scale(calc((10 / 14))) translate(0, -14rpx);
   }
-}
+}

package/components/oxy-status-tip/index.scss

@@ -23,15 +23,15 @@
 
   @include edeep(image) {
     margin: 0 auto;
-    width: 160px;
-    height: 160px;
+    width: 320rpx;
+    height: 320rpx;
   }
   @include e(text) {
-    margin: 20px auto 0;
+    margin: 40rpx auto 0;
     font-size: $-statustip-fs;
     line-height: $-statustip-line-height;
     color: $-statustip-color;
     text-align: center;
     overflow-wrap: break-word;
   }
-}
+}

package/components/oxy-status-tip/oxy-status-tip.vue

@@ -24,7 +24,7 @@ import ImgContent from './images/content.png'
 import ImgNetwork from './images/network.png'
 import ImgSearch from './images/search.png'
 import { computed, type CSSProperties } from 'vue'
-import { addUnit, isDef, isObj, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, isObj, objToStyle } from '../common/util'
 import { statusTipProps } from './types'
 
 const imgs: AnyObject = {
@@ -54,12 +54,12 @@ const imgStyle = computed(() => {
   let style: CSSProperties = {}
   if (props.imageSize) {
     if (isObj(props.imageSize)) {
-      isDef(props.imageSize.height) && (style.height = addUnit(props.imageSize.height))
-      isDef(props.imageSize.width) && (style.width = addUnit(props.imageSize.width))
+      isDef(props.imageSize.height) && (style.height = withDefaultUnit(props.imageSize.height))
+      isDef(props.imageSize.width) && (style.width = withDefaultUnit(props.imageSize.width))
     } else {
       style = {
-        height: addUnit(props.imageSize),
-        width: addUnit(props.imageSize)
+        height: withDefaultUnit(props.imageSize),
+        width: withDefaultUnit(props.imageSize)
       }
     }
   }

package/components/oxy-status-tip/types.ts

@@ -4,11 +4,11 @@ import type { ImageMode } from '../oxy-img/types'
 
 export type ImageSize = {
   /**
-   * 宽度
+   * 宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   width: number | string
   /**
-   * 高度
+   * 高度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   height: number | string
 }
@@ -25,7 +25,7 @@ export const statusTipProps = {
   image: makeStringProp('network'),
 
   /**
-   * 图片大小，默认单位为 `px`。
+   * 图片大小，number 类型按 `rpx` 语义处理，也支持 `px/rpx`。
    * 类型: string 或 number 或 ImageSize
    * 默认值: 空字符串
    */

package/components/oxy-step/index.scss

@@ -78,12 +78,12 @@
     color: $-steps-inactive-color;
   }
   @include e(icon-outer) {
-    width: calc($-steps-icon-size - 2px);
-    height: calc($-steps-icon-size - 2px);
+    width: calc($-steps-icon-size - 4rpx);
+    height: calc($-steps-icon-size - 4rpx);
     border: 1px solid $-steps-inactive-color;
     color: $-steps-inactive-color;
     text-align: center;
-    line-height: calc($-steps-icon-size - 2px);
+    line-height: calc($-steps-icon-size - 4rpx);
     border-radius: 50%;
     font-size: $-steps-icon-text-fs;
   }
@@ -105,7 +105,7 @@
     background: $-steps-line-color;
   }
   @include e(content){
-    margin-top: 7px;
+    margin-top: 14rpx;
     color: $-steps-inactive-color;
     font-size: $-steps-label-fs;
   }
@@ -118,8 +118,8 @@
     }
   }
   @include e(description) {
-    margin-top: 5px;
-    padding: 0 2px;
+    margin-top: 10rpx;
+    padding: 0 4rpx;
     color: $-steps-description-color;
   }
   @include when(wait) {
@@ -163,10 +163,10 @@
         &::after {
           position: absolute;
           content: '';
-          width: $-steps-dot-size + 10px;
-          height: $-steps-dot-size + 10px;
-          left: -5px;
-          top: -5px;
+          width: $-steps-dot-size + 20rpx;
+          height: $-steps-dot-size + 20rpx;
+          left: -10rpx;
+          top: -10rpx;
           border-radius: 50%;
           background: $-steps-finished-color;
           opacity: 0.2;
@@ -207,7 +207,7 @@
       height: 100%;
 
       &.is-dot {
-        top: 6px;
+        top: 12rpx;
 
         .oxy-step__line {
           margin-left: -1px;
@@ -216,9 +216,9 @@
       }
     }
     .oxy-step__content {
-      margin-left: 30px;
+      margin-left: 60rpx;
       margin-top: 0;
-      padding-bottom: 20px;
+      padding-bottom: 40rpx;
     }
     .oxy-step__line {
       top: 0;
@@ -232,4 +232,4 @@
       margin-top: -1px;
     }
   }
-}
+}

package/components/oxy-sticky/oxy-sticky.vue

@@ -24,7 +24,7 @@ export default {
 <script lang="ts" setup>
 import OxyResize from '../oxy-resize/oxy-resize.vue'
 import { computed, getCurrentInstance, reactive, ref, type CSSProperties } from 'vue'
-import { addUnit, getRect, objToStyle, pause, uuid } from '../common/util'
+import { getRect, objToStyle, pause, unitConvert, uuid } from '../common/util'
 import { stickyProps } from './types'
 import { useParent } from '../composables/useParent'
 import { STICKY_BOX_KEY } from '../oxy-sticky-box/types'
@@ -49,8 +49,8 @@ const { proxy } = getCurrentInstance() as any
 const rootStyle = computed(() => {
   const style: CSSProperties = {
     'z-index': props.zIndex,
-    height: addUnit(stickyState.height),
-    width: addUnit(stickyState.width)
+    height: unitConvert(stickyState.height, 0, { output: 'px' }),
+    width: unitConvert(stickyState.width, 0, { output: 'px' })
   }
   if (!stickyState.boxLeaved) {
     style['position'] = 'relative'
@@ -61,8 +61,8 @@ const rootStyle = computed(() => {
 const stickyStyle = computed(() => {
   const style: CSSProperties = {
     'z-index': props.zIndex,
-    height: addUnit(stickyState.height),
-    width: addUnit(stickyState.width)
+    height: unitConvert(stickyState.height, 0, { output: 'px' }),
+    width: unitConvert(stickyState.width, 0, { output: 'px' })
   }
   if (!stickyState.boxLeaved) {
     style['position'] = 'relative'
@@ -73,7 +73,7 @@ const stickyStyle = computed(() => {
 const containerStyle = computed(() => {
   const style: CSSProperties = {
     position: stickyState.position as 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed',
-    top: addUnit(stickyState.top)
+    top: unitConvert(stickyState.top, 0, { output: 'px' })
   }
   return objToStyle(style)
 })

package/components/oxy-stream-render/types.ts

@@ -1,5 +1,8 @@
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 
+/**
+ * 流式渲染组件属性
+ */
 export const streamRenderProps = {}
 
 export type StreamRenderProps = ExtractPropTypes<typeof streamRenderProps>

package/components/oxy-swipe-action/oxy-swipe-action.vue

@@ -39,7 +39,7 @@ import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted,
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { useTouch } from '../composables/useTouch'
-import { getRect } from '../common/util'
+import { getRect, unitConvert } from '../common/util'
 import { swipeActionProps, type SwipeActionPosition, type SwipeActionReason, type SwipeActionStatus } from './types'
 
 const props = defineProps(swipeActionProps)
@@ -55,6 +55,10 @@ const originOffset = ref<number>(0)
 const wrapperOffset = ref<number>(0)
 // 是否处于滑动状态
 const touching = ref<boolean>(false)
+// 标记本次触摸周期是否发生过横向滑动，用于抑制触摸后的合成 click
+const swiping = ref<boolean>(false)
+// 拖拽计算版本号，避免异步获取宽度结果乱序导致位移回退
+const dragVersion = ref<number>(0)
 
 const touch = useTouch()
 
@@ -139,7 +143,7 @@ function getWidths() {
  */
 function swipeMove(offset = 0) {
   // this.offset = offset
-  const transform = `translate3d(${offset}px, 0, 0)`
+  const transform = `translate3d(${unitConvert(offset, 0, { output: 'px' })}, 0, 0)`
   // 跟随手指滑动，不需要动画
   const transition = touching.value ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
   wrapperStyle.value = `
@@ -156,6 +160,11 @@ function swipeMove(offset = 0) {
  * @param event
  */
 function onClick(position?: SwipeActionPosition) {
+  if (swiping.value) {
+    swiping.value = false
+    return
+  }
+
   if (props.disabled || wrapperOffset.value === 0) {
     return
   }
@@ -172,6 +181,8 @@ function onClick(position?: SwipeActionPosition) {
 function startDrag(event: TouchEvent) {
   if (props.disabled) return
 
+  dragVersion.value += 1
+  swiping.value = false
   originOffset.value = wrapperOffset.value
   touch.touchStart(event)
   if (queue && queue.closeOther) {
@@ -196,10 +207,17 @@ function onDrag(event: TouchEvent) {
   }
 
   touching.value = true
+  swiping.value = true
+  const currentDragVersion = ++dragVersion.value
 
   // 本次滑动，wrapper应该设置的偏移量
   const offset = originOffset.value + touch.deltaX.value
   getWidths().then(([leftWidth, rightWidth]) => {
+    // 忽略过期的拖拽帧，避免异步返回顺序打乱造成回弹
+    if (!touching.value || currentDragVersion !== dragVersion.value) {
+      return
+    }
+
     // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
     if ((leftWidth === 0 && offset > 0) || (rightWidth === 0 && offset < 0)) {
       swipeMove(0)
@@ -224,6 +242,7 @@ function endDrag() {
   // 滑出"操作按钮"的阈值
   const THRESHOLD = 0.3
   touching.value = false
+  dragVersion.value += 1
 
   getWidths().then(([leftWidth, rightWidth]) => {
     if (
@@ -261,6 +280,12 @@ function endDrag() {
       close('swipe')
     }
   })
+
+  if (swiping.value) {
+    setTimeout(() => {
+      swiping.value = false
+    }, 0)
+  }
 }
 /**
  * @description 关闭操过按钮，并在合适的时候调用 beforeClose