oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-message-box/oxy-message-box.vue

@@ -5,13 +5,14 @@
       v-model="messageState.show"
       :close-on-click-modal="messageState.closeOnClickModal"
       :lazy-render="messageState.lazyRender"
+      :max-width="popupMaxWidth"
       custom-class="oxy-message-box"
       @click-modal="toggleModal('modal')"
       :z-index="messageState.zIndex"
       :duration="200"
       :root-portal="rootPortal"
     >
-      <view :class="rootClass">
+      <view :class="rootClass" :style="containerStyle">
         <view :class="bodyClass">
           <view v-if="messageState.title" class="oxy-message-box__title">
             {{ messageState.title }}
@@ -62,7 +63,7 @@ import OxyInput from '../oxy-input/oxy-input.vue'
 import { computed, inject, reactive, ref, watch } from 'vue'
 import { messageBoxProps, type MessageOptionsWithCallBack, type MessageResult } from './types'
 import { defaultOptions, getMessageDefaultOptionKey } from '.'
-import { deepAssign, isDef, isFunction, isUndefined, omitBy } from '../common/util'
+import { deepAssign, isDef, isFunction, isUndefined, omitBy, resolveSizeWithScreenWidth } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import type { ButtonProps } from '../oxy-button/types'
 
@@ -78,6 +79,11 @@ const bodyClass = computed(() => {
   return `oxy-message-box__body ${!messageState.title ? 'is-no-title' : ''} ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
 })
 
+const containerStyle = computed(() => {
+  const width = resolveSizeWithScreenWidth(messageState.width || props.width, { defaultUnit: 'rpx' })
+  return `width:${width};`
+})
+
 const messageOptionKey = getMessageDefaultOptionKey(props.selector)
 const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack>(defaultOptions)) // message选项
 
@@ -96,7 +102,8 @@ const messageState = reactive<MessageOptionsWithCallBack>({
   inputError: '', // 输入框错误提示文案
   showErr: false, // 是否显示错误提示
   zIndex: 99, // 弹窗层级
-  lazyRender: true // 弹层内容懒渲染
+  lazyRender: true, // 弹层内容懒渲染
+  width: props.width // 弹框宽度
 })
 
 /**
@@ -280,6 +287,7 @@ function reset(option: MessageOptionsWithCallBack) {
     messageState.showErr = option.showErr
     messageState.zIndex = option.zIndex
     messageState.lazyRender = option.lazyRender
+    messageState.width = isDef(option.width) ? option.width : props.width
     messageState.confirmButtonProps = option.confirmButtonProps
     messageState.cancelButtonProps = option.cancelButtonProps
   }

package/components/oxy-message-box/types.ts

@@ -77,6 +77,10 @@ export type MessageOptions = {
    * 弹层内容懒渲染，触发展示时才渲染内容
    */
   lazyRender?: boolean
+  /**
+   * 弹框宽度，支持带单位的值（如 `640rpx`、`480px`、`80%`）
+   */
+  width?: string
   /**
    * 确认前钩子
    */
@@ -125,6 +129,16 @@ export const messageBoxProps = {
    * 指定唯一标识
    */
   selector: makeStringProp(''),
+  /**
+   * 弹框宽度，支持带单位的值（如 `640rpx`、`480px`、`80%`）
+   * @default '80%'
+   */
+  width: makeStringProp('80%'),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */

package/components/oxy-navbar/index.scss

@@ -58,7 +58,7 @@
     font-size: $-navbar-desc-font-size;
     display: flex;
     align-items: center;
-    padding: 0 12px;
+    padding: 0 24rpx;
 
     @include when(disabled) {
       opacity: $-navbar-disabled-opacity;
@@ -90,4 +90,4 @@
     width: 100%;
     z-index: 500;
   }
-}
+}

package/components/oxy-navbar/oxy-navbar.vue

@@ -1,7 +1,10 @@
 <template>
-  <view :style="{ height: addUnit(height) }">
+  <view :style="placeholderStyle">
     <view :class="`oxy-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`" :style="rootStyle">
-      <view class="oxy-navbar__content">
+      <view
+        class="oxy-navbar__content"
+        :style="{ width: fixed && avoidMenuButtonMode === 'full' ? unitConvert(navWidth, 0, { output: 'px' }) : '100%' }"
+      >
         <view class="oxy-navbar__capsule" v-if="$slots.capsule">
           <slot name="capsule" />
         </view>
@@ -19,7 +22,12 @@
           <slot name="title" />
           <block v-if="!$slots.title && title">{{ title }}</block>
         </view>
-        <view :class="`oxy-navbar__right ${rightDisabled ? 'is-disabled' : ''}`" @click="handleClickRight" v-if="$slots.right || rightText">
+        <view
+          :class="`oxy-navbar__right ${rightDisabled ? 'is-disabled' : ''}`"
+          @click="handleClickRight"
+          v-if="$slots.right || rightText"
+          :style="rightStyle"
+        >
           <slot name="right" />
 
           <view v-if="!$slots.right && rightText" class="oxy-navbar__text" hover-class="oxy-navbar__text--hover" :hover-stay-time="70">
@@ -44,41 +52,63 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
-import { getRect, addUnit, isDef, objToStyle } from '../common/util'
+import { getRect, isDef, objToStyle, unitConvert } from '../common/util'
 import { navbarProps } from './types'
 
 const props = defineProps(navbarProps)
 const emit = defineEmits(['click-left', 'click-right'])
 
-const height = ref<number | ''>('') // 占位高度
+const placeholderHeight = ref<number | ''>('') // 占位高度（rpx 语义）
+const navWidth = ref<number | 'auto'>('auto') // 导航栏宽度
 
 const { statusBarHeight } = uni.getSystemInfoSync()
 
 watch(
-  [() => props.fixed, () => props.placeholder],
+  [() => props.fixed, () => props.placeholder, () => props.safeAreaInsetTop, () => props.customStyle],
   () => {
     setPlaceholderHeight()
   },
-  { deep: true, immediate: false }
+  { immediate: false }
 )
 
+const placeholderStyle = computed(() => {
+  if (!props.fixed || !props.placeholder) {
+    return {}
+  }
+  return {
+    height: `${Number(placeholderHeight.value) || 0}rpx`
+  }
+})
+
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (props.fixed && isDef(props.zIndex)) {
     style['z-index'] = props.zIndex
   }
   if (props.safeAreaInsetTop) {
-    style['padding-top'] = addUnit(statusBarHeight || 0)
+    style['padding-top'] = unitConvert(statusBarHeight || 0, 0, { output: 'px' })
   }
   return `${objToStyle(style)}${props.customStyle}`
 })
 
+const rightStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.fixed && props.avoidMenuButtonMode === 'right' && navWidth.value !== 'auto') {
+    style['right'] = `calc(100% - ${unitConvert(navWidth.value, 0, { output: 'px' })})`
+  }
+  return style
+})
+
 onMounted(() => {
   if (props.fixed && props.placeholder) {
-    nextTick(() => {
-      setPlaceholderHeight()
-    })
+    setPlaceholderHeight()
+  }
+  // #ifdef MP-WEIXIN
+  if (props.fixed && props.avoidMenuButtonMode) {
+    const menuBtnInfo = uni.getMenuButtonBoundingClientRect()
+    navWidth.value = menuBtnInfo.left
   }
+  // #endif
 })
 
 function handleClickLeft() {
@@ -97,11 +127,26 @@ const { proxy } = getCurrentInstance() as any
 
 function setPlaceholderHeight() {
   if (!props.fixed || !props.placeholder) {
+    placeholderHeight.value = ''
     return
   }
 
-  getRect('.oxy-navbar', false, proxy).then((res) => {
-    height.value = res.height as number
+  nextTick(() => {
+    getRect('.oxy-navbar', false, proxy)
+      .then((res) => {
+        const rectHeight = Number(res.height) || 0
+        const rectTop = Number(res.top)
+        const rectBottom = Number(res.bottom)
+        const occupiedHeight =
+          rectHeight > 0 ? rectHeight : !Number.isNaN(rectTop) && !Number.isNaN(rectBottom) ? Math.max(rectBottom - rectTop, 0) : 0
+        const pxPer100Rpx = uni.upx2px(100)
+        const occupiedHeightInRpx = pxPer100Rpx ? (occupiedHeight / pxPer100Rpx) * 100 : occupiedHeight * 2
+
+        placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
+      })
+      .catch(() => {
+        placeholderHeight.value = ''
+      })
   })
 }
 </script>

package/components/oxy-navbar/types.ts

@@ -46,7 +46,14 @@ export const navbarProps = {
   /**
    * 是否禁用右侧按钮，禁用时透明度降低，且无法点击
    */
-  rightDisabled: makeBooleanProp(false)
+  rightDisabled: makeBooleanProp(false),
+  /**
+   * 胶囊避让模式：'full' 整体缩小宽度，'right' 仅右侧避让，不传则不避让
+   */
+  avoidMenuButtonMode: {
+    type: String,
+    default: ''
+  }
 }
 
 export type NavbarProps = ExtractPropTypes<typeof navbarProps>

package/components/oxy-navbar-capsule/types.ts

@@ -2,6 +2,9 @@ import type { ExtractPropTypes } from 'vue'
 import { baseProps } from '../common/props'
 
 export const navbarCapsuleProps = {
+  /**
+   * 继承通用样式属性
+   */
   ...baseProps
 }
 

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

@@ -22,7 +22,7 @@
     color: $-notice-bar-danger-color;
   }
   @include edeep(prefix) {
-    padding-right: 4px;
+    padding-right: 8rpx;
     font-size: $-notice-bar-prefix-size;
   }
 
@@ -33,7 +33,7 @@
     background-color: $-notice-bar-close-bg;
     color: $-notice-bar-close-color;
     padding: 0;
-    border-radius: 0px 8px 0px 4px;
+    border-radius: 0 16rpx 0 8rpx;
     position: absolute;
     right: 0;
     top: 0;
@@ -65,4 +65,4 @@
       white-space: normal;
     }
   }
-}
+}

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

@@ -29,7 +29,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { ref, watch, nextTick, computed, getCurrentInstance, type CSSProperties, onMounted, onActivated, onDeactivated, reactive } from 'vue'
-import { getRect, isArray, isDef, objToStyle } from '../common/util'
+import { getRect, isArray, isDef, objToStyle, unitConvert, unitConvertWithDefault } from '../common/util'
 import { type NoticeBarExpose, noticeBarProps } from './types'
 const $wrap = '.oxy-notice-bar__wrap'
 const $content = '.oxy-notice-bar__content'
@@ -47,6 +47,10 @@ const wrapRect = ref<UniApp.NodeInfo | null>(null) // 外层容器节点信息
 const contentRect = ref<UniApp.NodeInfo | null>(null) // 内容节点信息
 const isHorizontal = computed(() => props.direction === 'horizontal')
 const isVertical = computed(() => props.direction === 'vertical')
+const speedInPx = computed(() => {
+  const value = unitConvertWithDefault(props.speed, { defaultUnit: 'rpx' })
+  return value > 0 ? value : 1
+})
 
 const transitionState = reactive<CSSProperties>({
   transitionProperty: 'unset',
@@ -149,7 +153,7 @@ function setTransition({ duration, delay, translate }: { duration: number; delay
   transitionState.transitionProperty = 'all'
   transitionState.transitionDelay = `${delay}s`
   transitionState.transitionDuration = `${duration}s`
-  transitionState.transform = `${props.direction === 'vertical' ? 'translateY' : 'translateX'}(${translate}px)`
+  transitionState.transform = `${props.direction === 'vertical' ? 'translateY' : 'translateX'}(${unitConvert(translate, 0, { output: 'px' })})`
   transitionState.transitionTimingFunction = 'linear'
 }
 
@@ -160,7 +164,7 @@ function queryRect() {
 async function verticalAnimate(height: number) {
   const translate = -(height / (textArray.value.length + 1)) * (currentIndex.value + 1)
   setTransition({
-    duration: height / (textArray.value.length + 1) / props.speed,
+    duration: height / (textArray.value.length + 1) / speedInPx.value,
     delay: props.delay,
     translate
   })
@@ -176,7 +180,7 @@ async function scroll() {
   if (isHorizontal.value) {
     if (props.scrollable) {
       setTransition({
-        duration: cRect.width / props.speed,
+        duration: cRect.width / speedInPx.value,
         delay: props.delay,
         translate: -cRect.width
       })
@@ -232,7 +236,7 @@ function animationEnd() {
 
       if (isHorizontal.value) {
         setTransition({
-          duration: (wrapWidth.value + contentRect.value.width) / props.speed,
+          duration: (wrapWidth.value + contentRect.value.width) / speedInPx.value,
           delay: props.delay,
           translate: -contentRect.value.width
         })

package/components/oxy-notice-bar/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
 export type NoticeBarType = 'warning' | 'info' | 'danger' | ''
 export type NoticeBarScrollDirection = 'horizontal' | 'vertical'
@@ -26,9 +26,9 @@ export const noticeBarProps = {
    */
   delay: makeNumberProp(1),
   /**
-   * 滚动速度（px/s）
+   * 滚动速度（支持 px/rpx，number 与纯数字字符串按 rpx 处理）
    */
-  speed: makeNumberProp(50),
+  speed: makeNumericProp(100),
   /**
    * 是否可关闭
    */

package/components/oxy-notify/index.ts

@@ -54,6 +54,7 @@ function getDefaultOptions(): NotifyProps {
     position: 'top',
     safeHeight: undefined,
     background: undefined,
+    maxWidth: '',
     onClick: undefined,
     onClosed: undefined,
     onOpened: undefined

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

@@ -4,6 +4,7 @@
     :custom-style="customStyle"
     :position="state.position"
     :z-index="state.zIndex"
+    :max-width="state.maxWidth"
     :duration="250"
     :modal="false"
     :root-portal="state.rootPortal"
@@ -31,7 +32,7 @@ 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 { addUnit, isFunction } from '../common/util'
+import { isFunction, unitConvert } from '../common/util'
 
 const props = defineProps(notifyProps)
 const emits = defineEmits<{
@@ -47,7 +48,7 @@ const customStyle = computed(() => {
   let customStyle: string = ''
   switch (position) {
     case 'top':
-      customStyle = `top: calc(var(--window-top) + ${addUnit(safeHeight || 0)})`
+      customStyle = `top: calc(var(--window-top) + ${unitConvert(safeHeight || 0, 0, { output: 'px' })})`
       break
     case 'bottom':
       customStyle = 'bottom: var(--window-bottom)'

package/components/oxy-notify/types.ts

@@ -59,6 +59,13 @@ export const notifyProps = {
    * 背景颜色
    */
   background: makeStringProp(''),
+  /**
+   * 通知最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * 数值和纯数字字符串按 `rpx` 处理，`%` 在打开时按屏幕宽度换算为 `rpx`
+   * 类型：number | string
+   * 默认值：''
+   */
+  maxWidth: makeNumericProp(''),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */

package/components/oxy-pagination/index.scss

@@ -48,7 +48,7 @@
     padding: $-pagination-nav-sepatator-padding;
   }
   @include edeep(left){
-    transform: rotate(180deg) translateY(1px);
+    transform: rotate(180deg) translateY(2rpx);
     display: inline-block;
   }
   @include e(current){

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

@@ -5,7 +5,7 @@
         v-for="(_, index) in length"
         :key="index"
         :class="`oxy-password-input__item ${gutter ? '' : 'is-border'}`"
-        :style="{ marginLeft: index !== 0 && gutter ? addUnit(gutter) : 0 }"
+        :style="{ marginLeft: index !== 0 && gutter ? withDefaultUnit(gutter) : 0 }"
       >
         <view v-if="focused && index === modelValue.length" class="oxy-password-input__cursor"></view>
         <view v-else :class="`oxy-password-input__value`">
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { addUnit } from '../common/util'
+import { withDefaultUnit } from '../common/util'
 import { passwordInputProps } from './types'
 
 defineProps(passwordInputProps)

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

@@ -19,7 +19,7 @@ export const passwordInputProps = {
    */
   errorInfo: makeStringProp(''),
   /**
-   * 输入框格子之间的间距，如 20px 2em，默认单位为 px
+   * 输入框格子之间的间距，支持 `px/rpx`，也支持如 `2em` 等 CSS 单位
    */
   gutter: makeNumericProp(0),
   /**

package/components/oxy-picker/index.scss

@@ -27,7 +27,7 @@
 
 @include b(picker) {
   @include edeep(popup) {
-    border-radius: 16px 16px 0px 0px;
+    border-radius: 32rpx 32rpx 0 0;
   }
 
   @include edeep(cell) {
@@ -91,7 +91,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 24px 15px 14px 15px;
+    padding: 48rpx 30rpx 28rpx 30rpx;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -107,4 +107,47 @@
     float: 1;
     color: $-picker-toolbar-title-color;
   }
+
+  @include e(search) {
+    padding: 0 32rpx 24rpx 32rpx;
+    background: #fff;
+  }
+
+  @include e(search-input) {
+    display: flex;
+    align-items: center;
+    height: 72rpx;
+    padding: 0 24rpx;
+    background: #f5f5f5;
+    border-radius: 36rpx;
+
+    input {
+      flex: 1;
+      height: 100%;
+      margin-left: 16rpx;
+      font-size: 28rpx;
+      background: transparent;
+      border: none;
+      outline: none;
+    }
+  }
+
+  @include e(search-icon) {
+    font-size: 32rpx;
+    color: #999;
+  }
+
+  @include e(search-clear) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32rpx;
+    height: 32rpx;
+    margin-left: 8rpx;
+  }
+
+  @include e(search-clear-icon) {
+    font-size: 32rpx;
+    color: #999;
+  }
 }