oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-img-cropper/types.ts

@@ -38,11 +38,11 @@ export const imgCropperProps = {
    */
   imgSrc: makeStringProp(''),
   /**
-   * 图片宽
+   * 图片宽，支持 `px/rpx/%`，number 与纯数字字符串按 rpx 处理
    */
   imgWidth: makeNumericProp(''),
   /**
-   * 图片高
+   * 图片高，支持 `px/rpx/%`，number 与纯数字字符串按 rpx 处理
    */
   imgHeight: makeNumericProp(''),
   /**

package/components/oxy-img-lazy/oxy-img-lazy.vue

@@ -64,7 +64,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle } from '../common/util'
 import { imgLazyProps } from './types'
 
 const props = defineProps(imgLazyProps)
@@ -73,10 +73,10 @@ const emit = defineEmits(['show', 'load', 'error', 'destroyed'])
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {}
   if (isDef(props.height)) {
-    style['height'] = addUnit(props.height)
+    style['height'] = withDefaultUnit(props.height)
   }
   if (isDef(props.width)) {
-    style['width'] = addUnit(props.width)
+    style['width'] = withDefaultUnit(props.width)
   }
   return `${objToStyle(style)}${props.customStyle}`
 })

package/components/oxy-img-lazy/types.ts

@@ -28,15 +28,15 @@ export const imgLazyProps = {
    */
   mode: makeStringProp<ImageMode>('aspectFill'),
   /**
-   * 宽度，默认单位为px
+   * 宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   width: numericProp,
   /**
-   * 高度，默认单位为px
+   * 高度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   height: numericProp,
   /**
-   * 圆角大小，默认单位为px
+   * 圆角大小，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   borderRadius: makeStringProp('0'),
   /**

package/components/oxy-index-anchor/index.scss

@@ -22,8 +22,8 @@
 
 @include b(index-anchor) {
   background-color: $-color-gray-2;
-  padding: 10px;
-  font-size: 14px;
+  padding: 24rpx;
+  font-size: $-fs-content;
   color: $-color-title;
 
   @include when(sticky){

package/components/oxy-index-anchor/oxy-index-anchor.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
-import { indexAnchorProps } from './type'
+import { indexAnchorProps } from './types'
 import { onMounted, getCurrentInstance, ref, computed } from 'vue'
-import { indexBarInjectionKey } from '../oxy-index-bar/type'
+import { indexBarInjectionKey } from '../oxy-index-bar/types'
 import { getRect, isDef, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
 

package/components/oxy-index-anchor/{type.ts → types.ts}

@@ -3,6 +3,9 @@ import { baseProps, makeRequiredProp } from '../common/props'
 
 export const indexAnchorProps = {
   ...baseProps,
+  /**
+   * 索引项标识，可用于字母索引或数字索引
+   */
   index: makeRequiredProp([String, Number])
 }
 

package/components/oxy-index-bar/index.scss

@@ -22,15 +22,15 @@
   @include e(sidebar) {
     position: absolute;
     top: 50%;
-    right: 4px;
+    right: 12rpx;
     transform: translateY(-50%);
   }
 
   @include e(index) {
-    font-size: 12px;
+    font-size: $-index-bar-index-font-size;
     font-weight: $-fw-medium;
     color: $-color-title;
-    padding: 4px 6px;
+    padding: 12rpx 16rpx;
 
     @include when(active) {
       color: $-color-theme;

package/components/oxy-index-bar/oxy-index-bar.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AnchorIndex } from './type'
-import { indexBarInjectionKey, indexBarProps } from './type'
+import type { AnchorIndex } from './types'
+import { indexBarInjectionKey, indexBarProps } from './types'
 import { ref, getCurrentInstance, onMounted, reactive, nextTick, watch } from 'vue'
 import { getRect, isDef, uuid, pause } from '../common/util'
 import { useChildren } from '../composables/useChildren'
@@ -71,7 +71,7 @@ let offsetTop = 0
 let sidebarInfo = {
   // 侧边栏距离顶部的高度
   offsetTop: 0,
-  // 高度固定24px
+  // 高度固定48rpx
   indexHeight: 24
 }
 

package/components/oxy-index-bar/{type.ts → types.ts}

@@ -6,7 +6,7 @@ export type AnchorIndex = number | string
 
 export const indexBarProps = {
   /**
-   * @description 索引是否吸顶
+   * 索引栏是否启用吸顶效果
    */
   sticky: makeBooleanProp(false)
 }
@@ -16,7 +16,7 @@ export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>
 export type InderBarProvide = {
   props: { sticky?: boolean }
   anchorState: {
-    activeIndex: AnchorIndex | null // 当前激活的索引
+    activeIndex: AnchorIndex | null
   }
 }
 

package/components/oxy-input/index.scss

@@ -301,7 +301,7 @@
   }
 
   @include e(count) {
-    margin-left: 15px;
+    margin-left: 32rpx;
     font-size: $-input-count-fs;
     color: $-input-count-color;
     vertical-align: middle;

package/components/oxy-input-number/index.scss

@@ -45,8 +45,8 @@
     &::after {
       position: absolute;
       content: "";
-      width: calc(200% - 2px);
-      height: calc(200% - 2px);
+      width: calc(200% - 4rpx);
+      height: calc(200% - 4rpx);
       left: 0;
       top: 0;
       border: 1px solid $-input-number-border-color;
@@ -77,7 +77,7 @@
     display: block;
     width: $-input-number-input-width;
     height: $-input-number-height;
-    padding: 0 2px;
+    padding: 0 4rpx;
     box-sizing: border-box;
     z-index: 1;
     background: transparent;
@@ -93,7 +93,7 @@
   @include e(input-border) {
     position: absolute;
     width: 100%;
-    height: calc(200% - 2px);
+    height: calc(200% - 4rpx);
     left: 0;
     top: 0;
     border-top: 1px solid $-input-number-border-color;
@@ -129,4 +129,4 @@
       border-left: none;
     }
   }
-}
+}

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

@@ -13,7 +13,7 @@
     <view v-if="!withoutInput" class="oxy-input-number__inner" @click.stop="">
       <input
         class="oxy-input-number__input"
-        :style="`${inputWidth ? 'width: ' + inputWidth : ''}`"
+        :style="`${inputWidth ? 'width: ' + withDefaultUnit(inputWidth) : ''}`"
         :type="inputType"
         :input-mode="precision ? 'decimal' : 'numeric'"
         :disabled="disabled || disableInput"
@@ -52,7 +52,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { computed, nextTick, ref, watch } from 'vue'
-import { isDef, isEqual } from '../common/util'
+import { isDef, isEqual, withDefaultUnit } from '../common/util'
 import { inputNumberProps, type OperationType } from './types'
 import { callInterceptor } from '../common/interceptor'
 

package/components/oxy-input-number/types.ts

@@ -57,9 +57,10 @@ export const inputNumberProps = {
    */
   withoutInput: makeBooleanProp(false),
   /**
-   * 输入框宽度
+   * 输入框宽度。
+   * number 或纯数字字符串默认按 rpx 处理，支持传入带单位字符串（如 `px`、`rpx`、`%`）。
    */
-  inputWidth: makeNumericProp(36),
+  inputWidth: makeNumericProp(72),
   /**
    * 是否允许为空
    */

package/components/oxy-keyboard/index.scss

@@ -18,7 +18,7 @@
   user-select: none;
 
   @include m(with-title) {
-    border-radius: 20px 20px 0 0;
+    border-radius: $-keyboard-panel-radius $-keyboard-panel-radius 0 0;
   }
 
   @include e(header) {
@@ -28,7 +28,7 @@
     justify-content: center;
     box-sizing: content-box;
     height: $-keyboard-title-height;
-    padding-top: 6px;
+    padding-top: 12rpx;
     color: $-keyboard-title-color;
     font-size: $-keyboard-title-font-size;
   }
@@ -45,7 +45,7 @@
 
   @include e(body) {
     display: flex;
-    padding: 6px 0 0 6px;
+    padding: 12rpx 0 0 12rpx;
   }
 
   @include e(keys) {
@@ -57,7 +57,7 @@
   &-car {
     @include e(body) {
       display: flex;
-      padding: 6px 0 0 6px;
+      padding: 12rpx 0 0 12rpx;
     }
   }
 
@@ -68,7 +68,7 @@
       flex-wrap: wrap;
 
       .oxy-key-wrapper {
-        --oxy-keyboard-key-font-size: 18px;
+        --oxy-keyboard-key-font-size: #{$-keyboard-car-key-font-size};
         flex-basis: 10%;
 
         @include m(wider) {

package/components/oxy-keyboard/key/index.scss

@@ -21,7 +21,7 @@
   flex: 1;
   flex-basis: 33%;
   box-sizing: border-box;
-  padding: 0 6px 6px 0;
+  padding: 0 12rpx 12rpx 0;
 
   @include m(wider) {
     flex-basis: 66%;
@@ -45,8 +45,8 @@
   @include m(large) {
     position: absolute;
     top: 0;
-    right: 6px;
-    bottom: 6px;
+    right: 12rpx;
+    bottom: 12rpx;
     left: 0;
     height: auto;
   }

package/components/oxy-keyboard/key/index.vue

@@ -11,13 +11,13 @@
         <template v-if="text">
           {{ text }}
         </template>
-        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-delete" size="22px"></oxy-icon>
+        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-delete" size="44rpx"></oxy-icon>
       </template>
       <template v-else-if="type === 'extra'">
         <template v-if="text">
           {{ text }}
         </template>
-        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-collapse" size="22px"></oxy-icon>
+        <oxy-icon v-else custom-class="oxy-key__icon" name="keyboard-collapse" size="44rpx"></oxy-icon>
       </template>
       <template v-else>{{ text }}</template>
     </view>

package/components/oxy-keyboard/key/types.ts

@@ -3,9 +3,24 @@ import { makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/p
 export type NumberKeyType = '' | 'delete' | 'extra' | 'close'
 
 export const keyProps = {
+  /**
+   * 按键类型
+   */
   type: makeStringProp<NumberKeyType>(''),
+  /**
+   * 按键显示文本
+   */
   text: makeNumericProp(''),
+  /**
+   * 是否为加宽按键
+   */
   wider: makeBooleanProp(false),
+  /**
+   * 是否为大号按键
+   */
   large: makeBooleanProp(false),
+  /**
+   * 是否显示加载状态
+   */
   loading: makeBooleanProp(false)
 }

package/components/oxy-keyboard/oxy-keyboard.vue

@@ -3,6 +3,7 @@
     v-model="show"
     position="bottom"
     :z-index="zIndex"
+    :max-width="popupMaxWidth"
     :safe-area-inset-bottom="safeAreaInsetBottom"
     :modal-style="modal ? '' : 'opacity: 0;'"
     :modal="hideOnClickOutside"

package/components/oxy-keyboard/types.ts

@@ -33,6 +33,11 @@ export const keyboardProps = {
    * 层级
    */
   zIndex: makeNumberProp(100),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 最大长度
    */

package/components/oxy-link/index.scss

@@ -48,10 +48,10 @@
   }
 
   &__prefix-icon:not(:empty) + &__content:not(:empty) {
-	    padding-left: 4px;
+	    padding-left: 8rpx;
 	}
 
 	&__content:not(:empty) + &__suffix-icon:not(:empty) {
-	    padding-left: 4px;
+	    padding-left: 8rpx;
 	}
 }

package/components/oxy-list/oxy-list.vue

@@ -28,8 +28,8 @@
       @refresherrestore="onRestore"
       @refresherabort="onAbort"
     >
-      <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
-        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+      <view class="oxy-virtual-scroll__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: 'px' })})` }">
           <view v-for="(item, index) in virtualData" :key="index">
             <slot name="item" :item="item" :index="startIndex + index"></slot>
           </view>
@@ -54,7 +54,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -80,6 +80,7 @@ import type {
   ScrollViewOnScrollEvent
 } from '@uni-helper/uni-app-types/index'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { unitConvert } from '../common/util'
 
 const props = defineProps(listProps)
 

package/components/oxy-loading/oxy-loading.vue

@@ -19,7 +19,7 @@ export default {
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
-import { gradient, context, objToStyle, addUnit, isDef } from '../common/util'
+import { withDefaultUnit, gradient, context, objToStyle, isDef } from '../common/util'
 import { loadingProps } from './types'
 
 const svgDefineId = context.id++
@@ -44,7 +44,11 @@ const iconSize = ref<string | number | null>(null)
 watch(
   () => props.size,
   (newVal) => {
-    iconSize.value = addUnit(newVal)
+    if (!isDef(newVal) || newVal === '') {
+      iconSize.value = null
+      return
+    }
+    iconSize.value = withDefaultUnit(newVal)
   },
   {
     deep: true,
@@ -66,8 +70,8 @@ watch(
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(iconSize.value)) {
-    style.height = addUnit(iconSize.value)
-    style.width = addUnit(iconSize.value)
+    style.height = iconSize.value
+    style.width = iconSize.value
   }
   return `${objToStyle(style)} ${props.customStyle}`
 })

package/components/oxy-loading/types.ts

@@ -14,7 +14,7 @@ export const loadingProps = {
    */
   color: makeStringProp('#4D80F0'),
   /**
-   * 设置加载指示器大小
+   * 设置加载指示器大小，number 类型按 `rpx` 语义处理
    */
   size: makeNumericProp('')
 }

package/components/oxy-loadmore/index.scss

@@ -15,7 +15,7 @@
 
   @include edeep(loading) {
     display: inline-block;
-    margin-right: 8px;
+    margin-right: 16rpx;
     vertical-align:  middle;
     width: $-loadmore-loading-size;
     height: $-loadmore-loading-size;
@@ -26,7 +26,7 @@
     vertical-align: middle;
 
     @include when(light) {
-      margin: 0 6px;
+      margin: 0 12rpx;
       color: $-loadmore-error-color;
     }
   }
@@ -36,4 +36,4 @@
     vertical-align: middle;
     font-size: $-loadmore-refresh-fs;
   }
-}
+}

package/components/oxy-long-press-menu/index.scss

@@ -0,0 +1,93 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(long-press-menu) {
+  position: relative;
+  display: inline-block; /* 让容器适应内容宽度 */
+  user-select: none;
+  -webkit-user-select: none;
+
+  @include e(trigger) {
+    position: relative;
+    transition: background-color 0.2s;
+    border-radius: $-long-press-menu-radius;
+    /* 默认为 inline-block，减少空白占据 */
+    display: inline-block;
+    width: 100%;
+
+    @include when(active) {
+      background-color: $-long-press-menu-active-bg; /* 长按时的高亮背景 */
+    }
+  }
+
+  @include e(mask) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 998;
+    background-color: transparent; /* 透明遮罩，点击关闭 */
+  }
+
+  @include e(popover) {
+    position: fixed;
+    z-index: $-long-press-menu-z-index;
+    background-color: $-long-press-menu-bg;
+    border-radius: $-long-press-menu-radius;
+    padding: $-long-press-menu-padding;
+    min-width: 200rpx;
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
+  @include e(item) {
+    padding: $-long-press-menu-item-padding;
+    position: relative;
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 24rpx;
+      bottom: 24rpx;
+      width: 1px;
+      background-color: $-long-press-menu-divider-color;
+    }
+  }
+
+  @include e(text) {
+    color: $-long-press-menu-color;
+    font-size: $-long-press-menu-fs;
+    white-space: nowrap;
+  }
+
+  @include e(arrow) {
+    left: 24rpx;
+  }
+  @include triangleArrow($-long-press-menu-arrow-size, $-long-press-menu-bg);
+
+  @include when(selectable) {
+    /* 移除 user-select，改为控制 trigger */
+    .oxy-long-press-menu__trigger {
+      user-select: text;
+      -webkit-user-select: text;
+      -webkit-touch-callout: none; /* 禁用系统默认长按菜单 */
+      cursor: text;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}