oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-img-cropper/index.scss

@@ -65,7 +65,7 @@
       }
 
       // 结算框对角尺寸
-      $border-size: 2px;
+      $border-size: 4rpx;
 
       // 节选框的四个角
       .is-left-top,
@@ -76,14 +76,14 @@
           content: "";
           position: absolute;
           width: $border-size;
-          height: 20px;
+          height: 40rpx;
           background-color: #fff;
         }
 
         &::after {
           content: "";
           position: absolute;
-          width: 20px;
+          width: 40rpx;
           height: $border-size;
           background-color: #fff;
         }
@@ -184,8 +184,8 @@
   @include e(canvas) {
     position: fixed;
     background: white;
-    width: 150px;
-    height: 150px;
+    width: 300rpx;
+    height: 300rpx;
     z-index: 10;
     top: -200%;
     pointer-events: none;
@@ -194,7 +194,7 @@
   @include e(footer) {
     position: fixed;
     z-index: 10;
-    bottom: 10px;
+    bottom: 20rpx;
     width: 100%;
     height: 15vh;
     text-align: center;
@@ -202,7 +202,7 @@
     @include m(button) {
       position: relative;
       text-align: left;
-      margin: 0 20px;
+      margin: 0 40rpx;
       padding-top: 4vh;
       // line-height: 32px;
       box-sizing: border-box;
@@ -210,16 +210,16 @@
       .is-cancel {
         display: inline-block;
         color: #fff;
-        font-size: 16px;
+        font-size: 32rpx;
       }
 
       .is-confirm {
         position: absolute;
         right: 0;
         // height: 32px;
-        width: 56px;
-        border-radius: 16px;
-        font-size: 16px;
+        width: 112rpx;
+        border-radius: 32rpx;
+        font-size: 32rpx;
       }
     }
   }
@@ -228,4 +228,4 @@
     font-size: $-img-cropper-icon-size;
     color: $-img-cropper-icon-color;
   }
-}
+}

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

@@ -6,15 +6,15 @@
       <!-- 画出裁剪框 -->
       <view class="oxy-img-cropper__cut">
         <!-- 上方阴影块 -->
-        <view :class="`oxy-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`" :style="`height: ${cutTop}px;`"></view>
-        <view class="oxy-img-cropper__cut--middle" :style="`height: ${cutHeight}px;`">
+        <view :class="`oxy-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`" :style="`height: ${toPx(cutTop)};`"></view>
+        <view class="oxy-img-cropper__cut--middle" :style="`height: ${toPx(cutHeight)};`">
           <!-- 左侧阴影块 -->
           <view
             :class="`oxy-img-cropper__cut--left ${IS_TOUCH_END ? '' : 'is-hightlight'}`"
-            :style="`width: ${cutLeft}px; height: ${cutHeight}px;`"
+            :style="`width: ${toPx(cutLeft)}; height: ${toPx(cutHeight)};`"
           ></view>
           <!-- 裁剪框 -->
-          <view class="oxy-img-cropper__cut--body" :style="`width: ${cutWidth}px; height: ${cutHeight}px;`">
+          <view class="oxy-img-cropper__cut--body" :style="`width: ${toPx(cutWidth)}; height: ${toPx(cutHeight)};`">
             <!-- 内部网格线 -->
             <view class="is-gridlines-x"></view>
             <view class="is-gridlines-y"></view>
@@ -52,7 +52,7 @@
       :id="canvasId"
       class="oxy-img-cropper__canvas"
       :disable-scroll="true"
-      :style="`width: ${Number(canvasWidth) * canvasScale}px; height: ${Number(canvasHeight) * canvasScale}px;`"
+      :style="`width: ${toPx(Number(canvasWidth) * canvasScale)}; height: ${toPx(Number(canvasHeight) * canvasScale)};`"
     />
     <!-- 下方按钮 -->
     <view class="oxy-img-cropper__footer">
@@ -80,7 +80,8 @@ export default {
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyButton from '../oxy-button/oxy-button.vue'
 import { computed, getCurrentInstance, ref, watch } from 'vue'
-import { addUnit, objToStyle, uuid } from '../common/util'
+import { objToStyle, unitConvert, unitConvertWithDefault, uuid } from '../common/util'
+import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 import { useTranslate } from '../composables/useTranslate'
 import { imgCropperProps, type ImgCropperExpose } from './types'
 
@@ -132,11 +133,12 @@ const imgScale = ref<number>(1)
 // imgWidth: null,
 // imgHeight: null,
 // 图片中心轴点距左的距离
-const imgLeft = ref<number>(uni.getSystemInfoSync().windowWidth / 2)
-const imgTop = ref<number>((uni.getSystemInfoSync().windowHeight / 2) * TOP_PERCENT)
+const initialInfo = uni.getSystemInfoSync()
+const imgLeft = ref<number>(initialInfo.windowWidth / 2)
+const imgTop = ref<number>((initialInfo.windowHeight / 2) * TOP_PERCENT)
 
 const imgInfo = ref<UniApp.GetImageInfoSuccessData | null>(null)
-const info = ref<UniApp.GetSystemInfoResult>(uni.getSystemInfoSync())
+const info = ref<UniApp.GetSystemInfoResult>(initialInfo)
 
 // 是否移动中设置 同时控制背景颜色是否高亮
 const IS_TOUCH_END = ref<boolean>(true)
@@ -157,31 +159,58 @@ const fingerDistance = ref<string | number>('')
 const ctx = ref<UniApp.CanvasContext | null>(null)
 
 const { proxy } = getCurrentInstance() as any
+const updateSystemInfo = (res?: WindowResizeResult) => {
+  const systemInfo = uni.getSystemInfoSync()
+  const resizeWidth = Number(res?.size?.windowWidth ?? res?.windowWidth)
+  const resizeHeight = Number(res?.size?.windowHeight ?? res?.windowHeight)
+  info.value = {
+    ...systemInfo,
+    windowWidth: Number.isFinite(resizeWidth) && resizeWidth > 0 ? resizeWidth : systemInfo.windowWidth,
+    windowHeight: Number.isFinite(resizeHeight) && resizeHeight > 0 ? resizeHeight : systemInfo.windowHeight
+  }
+}
+
+function updateCropLayout() {
+  INIT_IMGWIDTH = props.imgWidth
+  INIT_IMGHEIGHT = props.imgHeight
+
+  // 根据aspectRatio计算裁剪框尺寸
+  const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
+  const tempCutWidth = info.value.windowWidth - offset.value * 2
+  const tempCutHeight = (tempCutWidth * heightRatio) / widthRatio
+
+  cutWidth.value = tempCutWidth
+  cutHeight.value = tempCutHeight
+  cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutHeight) / 2
+  cutLeft.value = offset.value
+
+  canvasScale.value = props.exportScale
+  canvasHeight.value = tempCutHeight
+  canvasWidth.value = tempCutWidth
+
+  // 根据开发者设置的图片目标尺寸计算实际尺寸
+  initImageSize()
+}
+
+const handleWindowResize = (res?: WindowResizeResult) => {
+  updateSystemInfo(res)
+  if (!props.modelValue) return
+
+  updateCropLayout()
+  if (imgInfo.value) {
+    computeImgSize()
+    resetImg()
+  }
+}
+
+useWindowResize(handleWindowResize)
 
 watch(
   () => props.modelValue,
   (newValue) => {
     if (newValue) {
-      INIT_IMGWIDTH = props.imgWidth
-      INIT_IMGHEIGHT = props.imgHeight
-      info.value = uni.getSystemInfoSync()
-
-      // 根据aspectRatio计算裁剪框尺寸
-      const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
-      const tempCutWidth = info.value.windowWidth - offset.value * 2
-      const tempCutHeight = (tempCutWidth * heightRatio) / widthRatio
-
-      cutWidth.value = tempCutWidth
-      cutHeight.value = tempCutHeight
-      cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutHeight) / 2
-      cutLeft.value = offset.value
-
-      canvasScale.value = props.exportScale
-      canvasHeight.value = tempCutHeight
-      canvasWidth.value = tempCutWidth
-
-      // 根据开发者设置的图片目标尺寸计算实际尺寸
-      initImageSize()
+      updateSystemInfo()
+      updateCropLayout()
       // 初始化canvas
       initCanvas()
       // 加载图片
@@ -242,21 +271,25 @@ const buttonStyle = computed(() => {
     position: 'absolute',
     right: 0,
     // height: 32px;
-    width: '56px',
-    'border-radius': '16px',
-    'font-size': '16px'
+    width: '112rpx',
+    'border-radius': '32rpx',
+    'font-size': '32rpx'
   }
 
   return objToStyle(style)
 })
 
+const toPx = (value: string | number | null | undefined) => unitConvert(value, 0, { output: 'px' })
+
 const imageStyle = computed(() => {
   const style: Record<string, string | number> = {
-    width: picWidth.value ? addUnit(picWidth.value) : 'auto',
-    height: picHeight.value ? addUnit(picHeight.value) : 'auto',
-    transform: `translate(${addUnit(imgLeft.value - picWidth.value / 2)}, ${addUnit(imgTop.value - picHeight.value / 2)}) scale(${
-      imgScale.value
-    }) rotate(${imgAngle.value}deg)`,
+    width: picWidth.value ? unitConvert(picWidth.value, 0, { output: 'px' }) : 'auto',
+    height: picHeight.value ? unitConvert(picHeight.value, 0, { output: 'px' }) : 'auto',
+    transform: `translate(${unitConvert(imgLeft.value - picWidth.value / 2, 0, { output: 'px' })}, ${unitConvert(
+      imgTop.value - picHeight.value / 2,
+      0,
+      { output: 'px' }
+    )}) scale(${imgScale.value}) rotate(${imgAngle.value}deg)`,
     'transition-duration': (isAnimation.value ? 0.4 : 0) + 's'
   }
   return objToStyle(style)
@@ -305,7 +338,7 @@ function setRoate(angle: number) {
  * 初始化图片的大小和角度以及距离
  */
 function resetImg() {
-  const { windowHeight, windowWidth } = uni.getSystemInfoSync()
+  const { windowHeight, windowWidth } = info.value
   imgScale.value = 1
   imgAngle.value = 0
   imgLeft.value = windowWidth / 2
@@ -387,21 +420,33 @@ function initCanvas() {
  *  图片初始化,处理宽高特殊单位
  */
 function initImageSize() {
-  // 处理宽高特殊单位 %>px
-  if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'string' && INIT_IMGWIDTH.indexOf('%') !== -1) {
-    const width: string = INIT_IMGWIDTH.replace('%', '')
-    INIT_IMGWIDTH = (info.value.windowWidth / 100) * Number(width)
-    picWidth.value = INIT_IMGWIDTH
-  } else if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'number') {
-    picWidth.value = INIT_IMGWIDTH
+  const resolveImageLength = (value: number | string | null, base: number): number | null => {
+    if (value === null || value === undefined || value === '') return null
+
+    if (typeof value === 'string') {
+      const trimmed = value.trim()
+      if (!trimmed) return null
+      if (trimmed.endsWith('%')) {
+        const percentValue = Number(trimmed.slice(0, -1))
+        if (!Number.isFinite(percentValue)) return null
+        return (base * percentValue) / 100
+      }
+    }
+
+    const converted = unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+    return Number.isFinite(converted) && converted > 0 ? converted : null
   }
-  if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'string' && INIT_IMGHEIGHT.indexOf('%') !== -1) {
-    const height = (props.imgHeight as string).replace('%', '')
-    // INIT_IMGHEIGHT = this.data.imgHeight = (info.value.windowHeight / 100) * Number(height)
-    INIT_IMGHEIGHT = (info.value.windowHeight / 100) * Number(height)
-    picWidth.value = INIT_IMGHEIGHT
-  } else if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'number') {
-    picWidth.value = Number(INIT_IMGWIDTH)
+
+  const resolvedWidth = resolveImageLength(INIT_IMGWIDTH, info.value.windowWidth)
+  if (resolvedWidth !== null) {
+    INIT_IMGWIDTH = resolvedWidth
+    picWidth.value = resolvedWidth
+  }
+
+  const resolvedHeight = resolveImageLength(INIT_IMGHEIGHT, info.value.windowHeight)
+  if (resolvedHeight !== null) {
+    INIT_IMGHEIGHT = resolvedHeight
+    picHeight.value = resolvedHeight
   }
 }
 

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: 20rpx;
+  font-size: 28rpx;
   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: 8rpx;
     transform: translateY(-50%);
   }
 
   @include e(index) {
-    font-size: 12px;
+    font-size: 24rpx;
     font-weight: $-fw-medium;
     color: $-color-title;
-    padding: 4px 6px;
+    padding: 8rpx 12rpx;
 
     @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: 30rpx;
     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: 40rpx 40rpx 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: 36rpx;
         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'),
   /**
    * 最大长度
    */