oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-notify/oxy-notify.vue

@@ -20,7 +20,9 @@
 export default {
   name: 'oxy-notify',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -29,9 +31,9 @@ export default {
 
 <script lang="ts" setup>
 import OxyPopup from '../oxy-popup/oxy-popup.vue'
-import { inject, computed, watch, ref } from 'vue'
-import { notifyProps, type NotifyProps } from './types'
-import { getNotifyOptionKey } from '.'
+import { computed, onUnmounted, watch } from 'vue'
+import { notifyProps } from './types'
+import { initNotifyOptions, removeNotifyOptions, resolveNotifyScopeId } from '.'
 import { isFunction, unitConvert } from '../common/util'
 
 const props = defineProps(notifyProps)
@@ -41,7 +43,12 @@ const emits = defineEmits<{
   (e: 'closed'): void
   (e: 'opened'): void
 }>()
-const state = inject(getNotifyOptionKey(props.selector), ref<NotifyProps>(props))
+const scopeId = resolveNotifyScopeId()
+const state = initNotifyOptions(props.selector, scopeId)
+
+onUnmounted(() => {
+  removeNotifyOptions(props.selector, scopeId)
+})
 
 const customStyle = computed(() => {
   const { safeHeight, position } = state.value

package/components/oxy-overlay/oxy-overlay.vue

@@ -2,11 +2,17 @@
   <oxy-transition
     :show="show"
     name="fade"
-    custom-class="oxy-overlay"
+    :custom-class="`oxy-overlay ${customClass}`"
     :duration="duration"
     :custom-style="`z-index: ${zIndex}; ${customStyle}`"
     :disable-touch-move="lockScroll"
     @click="handleClick"
+    @before-enter="handleBeforeEnter"
+    @enter="handleEnter"
+    @after-enter="handleAfterEnter"
+    @before-leave="handleBeforeLeave"
+    @leave="handleLeave"
+    @after-leave="handleAfterLeave"
   >
     <slot></slot>
   </oxy-transition>
@@ -15,7 +21,9 @@
 export default {
   name: 'oxy-overlay',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -31,12 +39,36 @@ import { useLockScroll } from '../composables/useLockScroll'
 
 const props = defineProps(overlayProps)
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'])
 
 function handleClick() {
   emit('click')
 }
 
+function handleBeforeEnter() {
+  emit('before-enter')
+}
+
+function handleEnter() {
+  emit('enter')
+}
+
+function handleAfterEnter() {
+  emit('after-enter')
+}
+
+function handleBeforeLeave() {
+  emit('before-leave')
+}
+
+function handleLeave() {
+  emit('leave')
+}
+
+function handleAfterLeave() {
+  emit('after-leave')
+}
+
 // #ifdef H5
 useLockScroll(() => props.show && props.lockScroll)
 // #endif

package/components/oxy-pagination/oxy-pagination.vue

@@ -42,7 +42,9 @@
 export default {
   name: 'oxy-pagination',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-password-input/oxy-password-input.vue

@@ -24,7 +24,9 @@
 export default {
   name: 'oxy-password-input',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-picker/index.scss

@@ -57,7 +57,7 @@
       }
     }
   }
-  
+
   @include edeep(arrow, clear) {
     display: block;
     font-size: $-cell-icon-size;
@@ -91,7 +91,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 48rpx 32rpx 32rpx 32rpx;
+    padding: $-spacing-48 $-spacing-32 $-spacing-32 $-spacing-32;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -101,7 +101,7 @@
       color: $-picker-loading-button-color;
     }
   }
-  
+
   @include e(title) {
     display: block;
     float: 1;
@@ -109,7 +109,7 @@
   }
 
   @include e(search) {
-    padding: 0 32rpx 28rpx 32rpx;
+    padding: 0 $-spacing-32 $-spacing-24 $-spacing-32;
     background: $-picker-search-bg;
   }
 
@@ -117,14 +117,14 @@
     display: flex;
     align-items: center;
     height: 80rpx;
-    padding: 0 24rpx;
+    padding: 0 $-spacing-24;
     background: $-picker-column-select-bg;
     border-radius: $-picker-search-radius;
 
     input {
       flex: 1;
       height: 100%;
-      margin-left: 20rpx;
+      margin-left: $-spacing-20;
       font-size: $-fs-content;
       background: transparent;
       border: none;
@@ -143,7 +143,7 @@
     justify-content: center;
     width: 32rpx;
     height: 32rpx;
-    margin-left: 12rpx;
+    margin-left: $-spacing-12;
   }
 
   @include e(search-clear-icon) {

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

@@ -94,7 +94,9 @@
 export default {
   name: 'oxy-picker',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -357,6 +359,9 @@ function onConfirm() {
     handleConfirm()
   }
 }
+/**
+ * 确认选择。检查搜索结果是否为空，非空时关闭弹窗并 emit confirm 事件。
+ */
 function handleConfirm() {
   if (isLoading.value || props.disabled) {
     popupShow.value = false
@@ -414,6 +419,9 @@ function noop() {}
 function onPickStart() {
   isPicking.value = true
 }
+/**
+ * 滑动结束回调。若在滑动过程中用户点击了确认，则自动触发确认。
+ */
 function onPickEnd() {
   isPicking.value = false
 
@@ -450,6 +458,9 @@ function clearSearch() {
   debouncedFilterColumns()
 }
 
+/**
+ * 搜索过滤列数据。支持自定义 filterMethod 或默认按 searchKey/labelKey 过滤。
+ */
 function filterColumns() {
   const keyword = searchKeyword.value.trim().toLowerCase()
   emit('search', { keyword } as PickerSearchEvent)

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

@@ -26,7 +26,7 @@
 
 @include b(picker-view) {
   position: relative;
-  padding: 24rpx 0;
+  padding: $-spacing-24 0;
 
   @include e(columns) {
     position: relative;

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

@@ -36,7 +36,9 @@
 export default {
   name: 'oxy-picker-view',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-popover/index.scss

@@ -35,7 +35,7 @@
   @include edeep(icon) {
     vertical-align: middle;
     font-size: $-popover-trigger-icon-size;
-    margin-right: 12rpx;
+    margin-right: $-spacing-12;
   }
 
   @include e(menu-inner) {
@@ -109,7 +109,7 @@
     right: -16rpx;
     top: -20rpx;
     transform: scale(0.5);
-    padding: 20rpx;
+    padding: $-spacing-20;
   }
 
   @include squareArrow($-popover-arrow-size, $-popover-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);

package/components/oxy-popover/oxy-popover.vue

@@ -1,6 +1,5 @@
 <template>
   <view :class="`oxy-popover ${customClass}`" :style="customStyle" id="popover" @click.stop="popover.noop">
-    <!-- 使用插槽时无法获取正确宽高 -->
     <view class="oxy-popover__pos oxy-popover__hidden" id="pos">
       <view :class="`oxy-popover__container ${customPop}`">
         <view v-if="!useContentSlot && mode === 'normal'" class="oxy-popover__inner">
@@ -12,6 +11,8 @@
             <text>{{ item.content }}</text>
           </view>
         </view>
+        <!-- 自定义插槽内容副本，用于获取正确宽高 -->
+        <slot name="content" v-if="useContentSlot" />
       </view>
     </view>
     <oxy-transition custom-class="oxy-popover__pos" :custom-style="popover.popStyle.value" :show="showPopover" name="fade" :duration="200">
@@ -53,7 +54,9 @@
 export default {
   name: 'oxy-popover',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-popup/oxy-popup.vue

@@ -19,6 +19,7 @@
         :show="modelValue"
         :name="transitionName"
         :destroy="hideWhenClose"
+        :disable-touch-move="lockScroll"
         @before-enter="emit('before-enter')"
         @enter="emit('enter')"
         @after-enter="emit('after-enter')"
@@ -52,6 +53,7 @@
       :show="modelValue"
       :name="transitionName"
       :destroy="hideWhenClose"
+      :disable-touch-move="lockScroll"
       @before-enter="emit('before-enter')"
       @enter="emit('enter')"
       @after-enter="emit('after-enter')"
@@ -69,7 +71,9 @@
 export default {
   name: 'oxy-popup',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -166,6 +170,10 @@ const rootClass = computed(() => {
   return `oxy-popup oxy-popup--${props.position} ${!props.transition && props.position === 'center' ? 'is-deep' : ''} ${props.customClass || ''}`
 })
 
+/**
+ * 初始化安全区域底部距离。
+ * 微信小程序使用 screenHeight - safeArea.bottom 计算，其他端使用 safeAreaInsets.bottom。
+ */
 onBeforeMount(() => {
   if (props.safeAreaInsetBottom) {
     const { safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()

package/components/oxy-progress/index.scss

@@ -47,8 +47,8 @@
     }
   }
   @include edeep(label) {
-    width: 60rpx;
-    margin-left: 20rpx;
+    width: 80rpx;
+    margin-left: $-spacing-20;
     color: $-progress-label-color;
     font-size: $-progress-label-fs;
   }

package/components/oxy-progress/oxy-progress.vue

@@ -17,7 +17,9 @@
 export default {
   name: 'oxy-progress',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -176,6 +178,11 @@ function createPartList(colorArray: string[] | ProgressColor[]) {
       }))
 }
 
+/**
+ * 分步更新进度到目标百分比。使用 setTimeout 链式调用，依次完成每一段颜色的进度变化。
+ * @param targetPercent - 目标百分比
+ * @param color - 对应颜色
+ */
 function update(targetPercent: number, color: string) {
   if (timer) return
   const { duration } = props

package/components/oxy-qrcode/draw.ts

@@ -380,7 +380,21 @@ export function canvasToPng(canvas: HTMLCanvasElement): Promise<string> {
     // #ifdef MP
     const data = canvas.toDataURL('image/png', 1)
     const fileMg = uni.getFileSystemManager()
-    const filepath = `${wx.env.USER_DATA_PATH}/${uuid()}.png`
+    const envInfo = (uni as any).getEnvInfoSync?.() ?? {}
+    const runtimeGlobal = globalThis as any
+    const userDataPath =
+      envInfo.USER_DATA_PATH ||
+      runtimeGlobal?.wx?.env?.USER_DATA_PATH ||
+      runtimeGlobal?.tt?.env?.USER_DATA_PATH ||
+      runtimeGlobal?.my?.env?.USER_DATA_PATH ||
+      runtimeGlobal?.qq?.env?.USER_DATA_PATH ||
+      runtimeGlobal?.swan?.env?.USER_DATA_PATH ||
+      ''
+    if (!userDataPath) {
+      resolve('')
+      return
+    }
+    const filepath = `${userDataPath}/${uuid()}.png`
     fileMg.writeFile({
       filePath: filepath,
       data: data.split(',')[1],

package/components/oxy-qrcode/oxy-qrcode.vue

@@ -7,7 +7,9 @@
 export default {
   name: 'oxy-qrcode',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -25,14 +27,16 @@ const props = defineProps(qrcodeProps)
 const qrcodeId = ref<string>('oxy-qrcode-' + uuid())
 
 /**
- * 主绘制方法，根据当前 props 生成二维码并绘制到 canvas。
- * 支持多平台（APP、H5、微信小程序），自动适配高分屏。
- * 内部调用 drawQrcode 进行二维码点阵绘制。
+ * 将尺寸值转换为数值（默认 rpx），用于二维码计算。
  */
 function getUnitNumber(value: number | string) {
   return unitConvertWithDefault(value, { defaultUnit: 'rpx' })
 }
 
+/**
+ * 主绘制方法，根据当前 props 生成二维码并绘制到 canvas。
+ * 支持多平台（APP、H5、微信小程序），自动适配高清屏（dpr 缩放）。
+ */
 function drawer() {
   const data = {
     text: props.text,
@@ -102,6 +106,9 @@ function getUnit(value: number | string) {
   return unitConvert(withDefaultUnit(value, 'rpx'), 0, { output: 'px' })
 }
 
+/**
+ * 延迟绘制二维码。HarmonyOS / iOS App 需要 50ms 延迟以确保 canvas 节点就绪。
+ */
 onMounted(() => {
   setTimeout(
     () => {

package/components/oxy-radio/index.scss

@@ -159,7 +159,7 @@
       height: $-radio-button-height;
       min-width: $-radio-button-min-width;
       max-width: $-radio-button-max-width;
-      padding: 16rpx 32rpx;
+      padding: $-radio-button-padding;
       margin-right: 0;
       line-height: 1.2;
       text-align: center;
@@ -169,7 +169,7 @@
       font-size: $-radio-button-fs;
       box-sizing: border-box;
       border: 1px solid $-radio-button-border;
-      transition: all 0.2s;
+      transition: all $-transition-duration-base;
       @include lineEllipsis;
     }
     @include when(checked) {
@@ -195,7 +195,7 @@
     }
     .oxy-radio__shape {
       display: block;
-      margin-right: 8rpx;
+      margin-right: $-spacing-8;
       float: left;
       &::after {
         content: "";
@@ -206,7 +206,7 @@
 
     @include when(dot) {
       .oxy-radio__shape {
-        margin-top: 4rpx;
+        margin-top: $-spacing-4;
       }
       @include when(large) {
         .oxy-radio__shape {
@@ -218,7 +218,7 @@
     &.icon-placement-right {
       .oxy-radio__shape {
         margin-right: 0;
-        margin-left: 8rpx;
+        margin-left: $-spacing-8;
         float: right;
       }
     }
@@ -265,18 +265,18 @@
 
   // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-radio) {
-    padding: 32rpx 32rpx;
+    padding: $-cell-wrapper-padding $-cell-padding;
     margin: 0;
 
     @include when(large) {
-      padding: 32rpx 32rpx;
+      padding: $-cell-wrapper-padding-large $-cell-padding;
     }
   }
 
   @include when(button-radio) {
     display: inline-flex;
     width: 33.3333%;
-    padding: 24rpx 24rpx 0 0;
+    padding: $-cell-wrapper-padding $-cell-padding 0 0;
     box-sizing: border-box;
 
     .oxy-radio__label {

package/components/oxy-radio/oxy-radio.vue

@@ -25,7 +25,9 @@
 export default {
   name: 'oxy-radio',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -44,26 +46,26 @@ const props = defineProps(radioProps)
 const { parent: radioGroup } = useParent(RADIO_GROUP_KEY)
 
 const isChecked = computed(() => {
-  if (radioGroup) {
-    return props.value === radioGroup.props.modelValue
+  if (radioGroup.value) {
+    return props.value === radioGroup.value.props.modelValue
   } else {
     return false
   }
 })
 
 const shapeValue = computed(() => {
-  return props.shape || getPropByPath(radioGroup, 'props.shape')
+  return props.shape || getPropByPath(radioGroup.value, 'props.shape')
 })
 
 const checkedColorValue = computed(() => {
-  return props.checkedColor || getPropByPath(radioGroup, 'props.checkedColor')
+  return props.checkedColor || getPropByPath(radioGroup.value, 'props.checkedColor')
 })
 
 const disabledValue = computed(() => {
   if (isDef(props.disabled)) {
     return props.disabled
   } else {
-    return getPropByPath(radioGroup, 'props.disabled')
+    return getPropByPath(radioGroup.value, 'props.disabled')
   }
 })
 
@@ -71,19 +73,19 @@ const inlineValue = computed(() => {
   if (isDef(props.inline)) {
     return props.inline
   } else {
-    return getPropByPath(radioGroup, 'props.inline')
+    return getPropByPath(radioGroup.value, 'props.inline')
   }
 })
 
 const sizeValue = computed(() => {
-  return props.size || getPropByPath(radioGroup, 'props.size')
+  return props.size || getPropByPath(radioGroup.value, 'props.size')
 })
 
 const cellValue = computed(() => {
   if (isDef(props.cell)) {
     return props.cell
   } else {
-    return getPropByPath(radioGroup, 'props.cell')
+    return getPropByPath(radioGroup.value, 'props.cell')
   }
 })
 
@@ -91,7 +93,7 @@ const iconPlacement = computed<RadioIconPlacement>(() => {
   if (isDef(props.iconPlacement)) {
     return props.iconPlacement
   } else {
-    return getPropByPath(radioGroup, 'props.iconPlacement')
+    return getPropByPath(radioGroup.value, 'props.iconPlacement')
   }
 })
 
@@ -108,8 +110,8 @@ watch(
  */
 function handleClick() {
   const { value } = props
-  if (!disabledValue.value && radioGroup && isDef(value)) {
-    radioGroup.updateValue(value)
+  if (!disabledValue.value && radioGroup.value && isDef(value)) {
+    radioGroup.value.updateValue(value)
   }
 }
 </script>

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

@@ -14,7 +14,7 @@
   // 顶部与两侧留白适当放大，避免按钮组在16px基准字号下过于紧凑
   @include when(button) {
     width: 100%;
-    padding: 24rpx 32rpx 40rpx 32rpx;
+    padding: $-cell-wrapper-padding $-cell-padding $-spacing-32 $-cell-padding;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-radio-group/oxy-radio-group.vue

@@ -7,7 +7,9 @@
 export default {
   name: 'oxy-radio-group',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-rate/oxy-rate.vue

@@ -31,7 +31,9 @@ export default {
   name: 'oxy-rate',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -155,6 +157,9 @@ function updateValue(value: number) {
   })
 }
 
+/**
+ * 触摸滑动评分。根据触摸点的 clientX 和每个星的 rect 判断当前触摸的星级和半星，实时更新评分。
+ */
 async function onTouchMove(event: TouchEvent) {
   const { clientX } = event.touches[0]
   const rateItems = await getRect('.oxy-rate__item', true, proxy)

package/components/oxy-rate/types.ts

@@ -31,9 +31,9 @@ export const rateProps = {
   /**
    * 图标大小
    * 类型: string
-   * 默认值: '32rpx'
+   * 默认值: '36rpx'
    */
-  size: makeStringProp('32rpx'),
+  size: makeStringProp('36rpx'),
 
   /**
    * 图标间距

package/components/oxy-resize/oxy-resize.vue

@@ -34,7 +34,9 @@
 export default {
   name: 'oxy-resize',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -69,6 +71,12 @@ const { proxy } = getCurrentInstance() as any
 
 const resizeId = ref<string>(`resize${uuid()}`)
 
+/**
+ * 初始化尺寸监听。通过双 scroll-view 滚动到底部的技巧模拟 ResizeObserver：
+ * - 插槽内容变化 → 容器尺寸变化 → scroll-view 自动滚动到底部 → 触发 @scroll
+ * - 前 3 次 scroll 事件为初始化/滚动到底部的副作用，第 4 次起才是真正的尺寸变化
+ * - 宽高变化时 emit('resize') 通知外部
+ */
 onMounted(() => {
   // 初始化数据获取
   const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
@@ -132,6 +140,10 @@ onMounted(() => {
   })
 })
 
+/**
+ * 将双 scroll-view 滚动到底部。expand 滚动到远超容器的位置确保始终在底部，
+ * shrink 滚动到相对较近的位置以便检测尺寸缩小。
+ */
 function scrollToBottom({ lastWidth, lastHeight }: { lastWidth: number; lastHeight: number }) {
   expandScrollTop.value = 100000 + lastHeight
   shrinkScrollTop.value = 3 * height.value + lastHeight