oxy-uni-ui 2.1.1 → 2.1.3

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

@@ -21,7 +21,9 @@ export default {
   name: 'oxy-sidebar-item',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -39,7 +41,7 @@ import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
 
 const props = defineProps(sidebarItemProps)
 
-const { parent: sidebar } = useParent(SIDEBAR_KEY)
+const { parent: sidebar, index } = useParent(SIDEBAR_KEY)
 
 const customBadgeProps = computed(() => {
   const badgeProps: Partial<BadgeProps> = deepAssign(
@@ -61,53 +63,37 @@ const customBadgeProps = computed(() => {
 
 const active = computed(() => {
   let active: boolean = false
-  if (sidebar && sidebar.props.modelValue === props.value) {
+  if (sidebar.value && sidebar.value.props.modelValue === props.value) {
     active = true
   }
   return active
 })
 
 const prefix = computed(() => {
-  let prefix: boolean = false
-  if (sidebar) {
-    let activeIndex: number = sidebar.children.findIndex((c: any) => {
-      return c.value === sidebar.props.modelValue
-    })
-
-    let currentIndex: number = sidebar.children.findIndex((c: any) => {
-      return c.value === props.value
-    })
-
-    if (currentIndex === activeIndex - 1) {
-      prefix = true
-    }
+  const sidebarValue = sidebar.value
+  if (!sidebarValue || index.value < 0) {
+    return false
   }
-  return prefix
+
+  const activeIndex = sidebarValue.internalChildren.findIndex((child) => child.props?.value === sidebarValue.props.modelValue)
+  return index.value === activeIndex - 1
 })
 
 const suffix = computed(() => {
-  let suffix: boolean = false
-  if (sidebar) {
-    let activeIndex: number = sidebar.children.findIndex((c: any) => {
-      return c.value === sidebar.props.modelValue
-    })
-
-    let currentIndex: number = sidebar.children.findIndex((c: any) => {
-      return c.value === props.value
-    })
-
-    if (currentIndex === activeIndex + 1) {
-      suffix = true
-    }
+  const sidebarValue = sidebar.value
+  if (!sidebarValue || index.value < 0) {
+    return false
   }
-  return suffix
+
+  const activeIndex = sidebarValue.internalChildren.findIndex((child) => child.props?.value === sidebarValue.props.modelValue)
+  return index.value === activeIndex + 1
 })
 
 function handleClick() {
   if (props.disabled) {
     return
   }
-  sidebar && sidebar.setChange(props.value, props.label)
+  sidebar.value && sidebar.value.setChange(props.value, props.label)
 }
 </script>
 

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

@@ -62,7 +62,9 @@ export default {
   name: 'oxy-signature',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -172,6 +174,12 @@ const currentLine = ref<Line>() // 当前正在绘制的线
 const currentStep = ref(0) // 当前步骤
 
 // 添加计算笔画宽度的方法
+/**
+ * 根据绘制速度计算笔画宽度。
+ * 速度越快线条越细，速度越慢线条越粗，在 minWidth 和 maxWidth 之间动态变化。
+ * @param speed - 当前点的绘制速度
+ * @returns 计算后的线宽
+ */
 function calculateLineWidth(speed: number): number {
   if (!props.pressure) return lineWidthInPx.value
 
@@ -344,6 +352,9 @@ const draw = (e: any) => {
 }
 
 /* 重绘整个画布 */
+/**
+ * 重绘整个画布。清除画布后按序重绘所有线条，笔锋模式使用贝塞尔曲线，普通模式使用直线段连接。
+ */
 const redrawCanvas = () => {
   const { ctx } = canvasState
   if (!ctx) return
@@ -450,6 +461,12 @@ const restore = () => {
 }
 
 // 添加平滑线条绘制方法
+/**
+ * 使用二次贝塞尔曲线绘制平滑线条（笔锋模式）。
+ * 根据相邻两点的速度计算控制点偏移，实现笔触两端尖锐、中间饱满的效果。
+ * @param prePoint - 前一个点
+ * @param point - 当前点
+ */
 function drawSmoothLine(prePoint: Point, point: Point) {
   const { ctx } = canvasState
   if (!ctx) return

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

@@ -15,7 +15,13 @@ export default {
   // #ifdef H5
   name: 'oxy-skeleton',
   // #endif
-  options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' }
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
 }
 </script>
 

package/components/oxy-slide-verify/index.scss

@@ -0,0 +1,95 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(slide-verify) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  width: $-slide-verify-width;
+  height: $-slide-verify-height;
+  border-radius: $-slide-verify-radius;
+  background: $-slide-verify-bg;
+
+  @include when(disabled) {
+    opacity: $-slide-verify-disabled-opacity;
+  }
+
+  @include e(text) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 $-slide-verify-text-padding-x;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  @include e(text-inner) {
+    color: $-slide-verify-text-color;
+    font-size: $-slide-verify-text-font-size;
+    line-height: $-slide-verify-text-line-height;
+    white-space: nowrap;
+  }
+
+  @include e(track) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background: $-slide-verify-track-bg;
+    border-radius: $-slide-verify-radius;
+    overflow: hidden;
+  }
+
+  @include e(track-text) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 $-slide-verify-text-padding-x;
+    box-sizing: border-box;
+    color: $-slide-verify-success-text-color;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+
+  @include e(track-text-inner) {
+    font-size: $-slide-verify-text-font-size;
+    line-height: $-slide-verify-text-line-height;
+  }
+
+  @include e(button) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: $-slide-verify-button-size;
+    height: $-slide-verify-button-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $-slide-verify-button-bg;
+    border: #{$-border-width-base} solid $-slide-verify-button-border-color;
+    border-radius: $-slide-verify-radius;
+    box-sizing: border-box;
+    box-shadow: $-slide-verify-button-shadow;
+  }
+
+  @include edeep(button-icon) {
+    color: $-slide-verify-button-color;
+    font-size: $-slide-verify-button-icon-size;
+  }
+
+  @include edeep(button-icon--success) {
+    color: $-slide-verify-button-success-color;
+    font-size: $-slide-verify-success-icon-size;
+  }
+}

package/components/oxy-slide-verify/oxy-slide-verify.vue

@@ -0,0 +1,244 @@
+<template>
+  <view :class="rootClass" :id="slideVerifyId" :style="rootStyle">
+    <view class="oxy-slide-verify__text">
+      <slot name="text">
+        <text class="oxy-slide-verify__text-inner">
+          {{ slideVerifyText }}
+        </text>
+      </slot>
+    </view>
+
+    <view class="oxy-slide-verify__track" :style="trackStyle">
+      <view class="oxy-slide-verify__track-text">
+        <slot name="success-text">
+          <text class="oxy-slide-verify__track-text-inner">
+            {{ slideVerifySuccessText }}
+          </text>
+        </slot>
+      </view>
+
+      <view
+        class="oxy-slide-verify__button"
+        @touchstart.prevent="onTouchStart"
+        @touchmove.prevent="onTouchMove"
+        @touchend="onTouchEnd"
+        @touchcancel="onTouchEnd"
+      >
+        <slot v-if="isPass" name="success-icon">
+          <oxy-icon custom-class="oxy-slide-verify__button-icon oxy-slide-verify__button-icon--success" :name="successIcon" :size="successIconSize" />
+        </slot>
+
+        <slot v-else name="icon">
+          <oxy-icon custom-class="oxy-slide-verify__button-icon" :name="icon" :size="iconSize" />
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-slide-verify',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref, type CSSProperties } from 'vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { getRect, isDef, objToStyle, uuid } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+import { useTranslate } from '../composables/useTranslate'
+import { slideVerifyProps, type SlideVerifyEmits, type SlideVerifyExpose } from './types'
+
+const props = defineProps(slideVerifyProps)
+const emit = defineEmits<SlideVerifyEmits>()
+
+const { proxy } = getCurrentInstance() as any
+const touch = useTouch()
+const { translate } = useTranslate('slide-verify')
+
+const slideVerifyId = ref<string>(`oxy-slide-verify-${uuid()}`)
+
+const slideVerifyText = computed(() => {
+  return isDef(props.text) && props.text !== '' ? props.text : translate('text')
+})
+
+const slideVerifySuccessText = computed(() => {
+  return isDef(props.successText) && props.successText !== '' ? props.successText : translate('successText')
+})
+
+const rootClass = computed(() => {
+  return [
+    'oxy-slide-verify',
+    {
+      'is-disabled': props.disabled,
+      'is-success': isPass.value,
+      'is-dragging': isDragging.value
+    },
+    props.customClass
+  ]
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.backgroundColor)) {
+    style.background = props.backgroundColor
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const trackStyle = computed(() => {
+  const style: CSSProperties = {
+    width: `${currentPosition.value + containerHeight.value}px`,
+    transition: isResetting.value ? 'all 0.3s ease' : 'none'
+  }
+
+  if (isDef(props.activeBackgroundColor)) {
+    style.background = props.activeBackgroundColor
+  }
+  if (currentPosition.value === 0) {
+    style.background = 'transparent'
+  }
+
+  return objToStyle(style)
+})
+
+const containerWidth = ref<number>(0)
+const containerHeight = ref<number>(0)
+
+/**
+ * 初始化：查询容器尺寸，用于计算滑块最大可拖动距离
+ */
+const init = async () => {
+  try {
+    const rect = await getRect(`#${slideVerifyId.value}`, false, proxy)
+    containerWidth.value = Number(rect.width) || 0
+    containerHeight.value = Number(rect.height) || 0
+  } catch (error) {
+    containerWidth.value = 0
+    containerHeight.value = 0
+  }
+}
+
+onMounted(() => {
+  init()
+})
+
+const maxPosition = computed(() => {
+  const width = containerWidth.value
+  const height = containerHeight.value
+  if (width <= 0 || height <= 0) return 0
+  return Math.max(0, width - height)
+})
+
+const isComplete = computed(() => {
+  const distance = Math.abs(maxPosition.value - currentPosition.value)
+  return distance <= props.tolerance
+})
+
+const currentPosition = ref<number>(0)
+const startPosition = ref<number>(0)
+const isPass = ref<boolean>(false)
+const isDragging = ref<boolean>(false)
+const isResetting = ref<boolean>(false)
+const timer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+const isDisabled = computed(() => props.disabled || isPass.value)
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(value, max))
+}
+
+function updatePosition(position: number) {
+  currentPosition.value = clamp(position, 0, maxPosition.value)
+}
+
+function clearResetTimer() {
+  if (timer.value !== null) {
+    clearTimeout(timer.value)
+    timer.value = null
+  }
+}
+
+/**
+ * 开启复位过渡动画（300ms），动画结束后自动关闭
+ */
+function openResetTransition() {
+  isResetting.value = true
+  clearResetTimer()
+  timer.value = setTimeout(() => {
+    isResetting.value = false
+    timer.value = null
+  }, 300)
+}
+
+/**
+ * 触摸开始：记录起始位置，禁止拖拽时的过渡动画
+ */
+function onTouchStart(event: any) {
+  if (isDisabled.value || isDragging.value) return
+
+  touch.touchStart(event)
+  startPosition.value = currentPosition.value
+  isDragging.value = true
+}
+
+/**
+ * 触摸移动：根据手指位移实时更新滑块位置
+ */
+function onTouchMove(event: any) {
+  if (isDisabled.value || !isDragging.value) return
+
+  touch.touchMove(event)
+  updatePosition(startPosition.value + touch.deltaX.value)
+}
+
+/**
+ * 触摸结束：判断是否到达终点
+ * 完成则触发 success 事件，未完成则复位并触发 fail 事件
+ */
+function onTouchEnd() {
+  if (isDisabled.value || !isDragging.value) return
+
+  isDragging.value = false
+
+  if (isComplete.value) {
+    updatePosition(maxPosition.value)
+    isPass.value = true
+    emit('success')
+    return
+  }
+
+  openResetTransition()
+  updatePosition(0)
+  emit('fail')
+}
+
+/**
+ * 重置滑块到初始状态，包含过渡动画
+ */
+function reset() {
+  openResetTransition()
+  currentPosition.value = 0
+  startPosition.value = 0
+  isPass.value = false
+  isDragging.value = false
+}
+
+onBeforeUnmount(() => {
+  clearResetTimer()
+})
+
+defineExpose<SlideVerifyExpose>({ reset, init })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-slide-verify/types.ts

@@ -0,0 +1,98 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp, numericProp } from '../common/props'
+
+export const slideVerifyProps = {
+  ...baseProps,
+
+  /**
+   * 容错范围（单位：px），距离终点在该范围内视为验证通过
+   * 类型: number
+   * 默认值: 10
+   */
+  tolerance: makeNumberProp(10),
+
+  /**
+   * 默认提示文案，传空字符串时使用内置文案
+   * 类型: string
+   * 默认值: ''
+   */
+  text: makeStringProp(''),
+
+  /**
+   * 验证成功提示文案，传空字符串时使用内置文案
+   * 类型: string
+   * 默认值: ''
+   */
+  successText: makeStringProp(''),
+
+  /**
+   * 是否禁用滑动验证
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 组件背景色，不传时使用组件 CSS 变量
+   * 类型: string
+   * 默认值: -
+   */
+  backgroundColor: String,
+
+  /**
+   * 激活轨道背景色，不传时使用组件 CSS 变量
+   * 类型: string
+   * 默认值: -
+   */
+  activeBackgroundColor: String,
+
+  /**
+   * 滑块图标名称
+   * 类型: string
+   * 默认值: 'arrow-right'
+   */
+  icon: makeStringProp('arrow-right'),
+
+  /**
+   * 验证通过图标名称
+   * 类型: string
+   * 默认值: 'check-circle-filled'
+   */
+  successIcon: makeStringProp('check-circle-filled'),
+
+  /**
+   * 滑块图标尺寸，number 与纯数字字符串按 rpx 处理，不传时使用组件默认样式
+   * 类型: string | number
+   * 默认值: -
+   */
+  iconSize: numericProp,
+
+  /**
+   * 验证通过图标尺寸，number 与纯数字字符串按 rpx 处理，不传时使用组件默认样式
+   * 类型: string | number
+   * 默认值: -
+   */
+  successIconSize: numericProp
+}
+
+export type SlideVerifyProps = ExtractPropTypes<typeof slideVerifyProps>
+
+export type SlideVerifyExpose = {
+  /**
+   * 初始化尺寸信息
+   */
+  init: () => Promise<void>
+  /**
+   * 重置验证状态
+   */
+  reset: () => void
+}
+
+export type SlideVerifyEmits = {
+  /** 验证成功事件 */
+  success: []
+  /** 验证失败事件 */
+  fail: []
+}
+
+export type SlideVerifyInstance = ComponentPublicInstance<SlideVerifyProps, SlideVerifyExpose>

package/components/oxy-slider/oxy-slider.vue

@@ -1,6 +1,7 @@
 <template>
   <view :class="rootClass" :style="customStyle">
     <!-- #ifdef MP-DINGTALK -->
+    <!-- 钉钉小程序需额外包裹一层 view 来设置 flex: 1，确保滑块正确撑满 -->
     <view style="flex: 1" :class="rootClass">
       <!-- #endif -->
       <view :class="`oxy-slider__label-min ${customMinClass}`" v-if="!hideMinMax">{{ minProp }}</view>
@@ -60,7 +61,9 @@ export default {
   name: 'oxy-slider',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }

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

@@ -20,14 +20,14 @@
       &::after {
         position: absolute;
         content: '';
-        width: 38rpx;
-        height: 6rpx;
-        bottom: 12rpx;
+        width: $-sort-button-line-width;
+        height: $-sort-button-line-height;
+        bottom: $-sort-button-line-bottom;
         left: 50%;
         transform: translate(-50%, 0);
         background: $-sort-button-line-color;
         border-radius: calc($-sort-button-line-height / 2);
-        transition: opacity .15s;
+        transition: opacity $-transition-duration-fast;
         opacity: 0;
       }
 
@@ -62,10 +62,11 @@
   @include e(right) {
     display: inline-block;
     min-width: 28rpx;
-    margin-left: 4rpx;
+    margin-left: $-spacing-4;
     vertical-align: middle;
     line-height: $-line-height-tight;
 
+    @include when(active) {
       :deep(.oxy-sort-button__icon-up),
       :deep(.oxy-sort-button__icon-down) {
         transform: scale(calc((10 / 14)));

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

@@ -17,7 +17,9 @@ export default {
   name: 'oxy-sort-button',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -31,6 +33,10 @@ const props = defineProps(sortButtonProps)
 
 const emit = defineEmits(['change', 'update:modelValue'])
 
+/**
+ * 排序切换处理。descFirst 模式下按 0→降序→升序 循环，普通模式按 0→升序→降序 循环。
+ * allowReset 为 true 时，第三次点击重置回 0。
+ */
 function handleClick() {
   let { modelValue: value, allowReset, descFirst } = props
   if (descFirst) {

package/components/oxy-splitter/index.scss

@@ -17,3 +17,12 @@
     flex-direction: column;
   }
 }
+
+// 看vite-plugin-host-class.ts DEFAULT_RULES中的配置
+/* #ifdef MP-TOUTIAO */
+@include b(splitter-toutiao) {
+  &.oxy-splitter {
+    display: block;
+  }
+}
+/* #endif */