oxy-uni-ui 1.2.3 → 2.0.0

package/components/common/util.ts

@@ -16,46 +16,199 @@ function s4() {
     .substring(1)
 }
 
+type UnitConvertOutput = 'number' | 'px'
+type DefaultUnit = 'px' | 'rpx'
+
 /**
- * @description 对num自动填充px
- * @param {Number} num
- * @return {string} num+px
+ * 通用单位转换函数。
+ *
+ * 支持输入：
+ * - `number`、纯数字字符串（如 `'12'`）
+ * - 带单位字符串：`px` / `rpx` / `%` / `em`
+ * - CSS 关键字（仅在 `output='px'` 且 `preserveCssKeyword=true` 时原样透传）
+ *
+ * 转换规则：
+ * - `output='number'`（默认）：返回数值（px 语义）。
+ *   - `rpx` -> `uni.upx2px`
+ *   - `px` -> 原数值
+ *   - `%` -> 按 `base` 计算
+ * - `output='px'`：返回可直接用于内联样式的字符串。
+ *   - 数字/纯数字字符串 -> `${value}px`
+ *   - 可识别单位按规则换算后输出 `${n}px`
+ *   - 关键字（如 `auto`）按配置透传
+ *
+ * @param value 待转换的值。
+ * @param base 百分比计算基准，仅在输入为 `%` 时生效。
+ * @param options 转换配置：
+ * - `output`：`'number' | 'px'`
+ * - `preserveCssKeyword`：`output='px'` 时是否透传 CSS 关键字，默认 `true`
+ * @returns `output='number'` 时返回 `number`；`output='px'` 时返回 `string`。
+ */
+export function unitConvert<T extends UnitConvertOutput = 'number'>(
+  value: string | number | null | undefined,
+  base: number = 0,
+  options: { output?: T; preserveCssKeyword?: boolean } = {}
+): T extends 'px' ? string : number {
+  const output = options.output ?? 'number'
+  const preserveCssKeyword = options.preserveCssKeyword ?? true
+
+  const toNumber = (input: string | number | null | undefined): number => {
+    // 如果是字符串数字
+    if (isNumeric(input)) {
+      return Number(input)
+    }
+    // 如果有单位
+    if (isString(input)) {
+      const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+      const results = reg.exec(input)
+      if (!input || !results) {
+        return 0
+      }
+      const unit = results[3]
+      const _value = parseFloat(input)
+      if (unit === 'rpx') {
+        return uni.upx2px(_value)
+      }
+      if (unit === 'px') {
+        return _value * 1
+      }
+      if (unit == '%') {
+        return (_value / 100) * base
+      }
+      // 如果是其他单位，可以继续添加对应的转换逻辑
+    }
+    return 0
+  }
+
+  if (output === 'px') {
+    if (value === null || value === undefined || value === '') {
+      return '0px' as T extends 'px' ? string : number
+    }
+
+    if (isNumber(value)) {
+      return `${value}px` as T extends 'px' ? string : number
+    }
+
+    if (isString(value)) {
+      const trimmed = value.trim()
+
+      if (!trimmed) {
+        return '0px' as T extends 'px' ? string : number
+      }
+
+      if (
+        preserveCssKeyword &&
+        (trimmed === 'auto' || trimmed === 'inherit' || trimmed === 'initial' || trimmed === 'unset' || trimmed.endsWith('%'))
+      ) {
+        return trimmed as T extends 'px' ? string : number
+      }
+
+      if (isNumeric(trimmed)) {
+        return `${Number(trimmed)}px` as T extends 'px' ? string : number
+      }
+
+      const convertedValue = toNumber(trimmed)
+
+      if (convertedValue || /^-?0(\.0+)?(rpx|px)?$/.test(trimmed)) {
+        return `${convertedValue}px` as T extends 'px' ? string : number
+      }
+
+      return trimmed as T extends 'px' ? string : number
+    }
+
+    return `${toNumber(value)}px` as T extends 'px' ? string : number
+  }
+
+  return toNumber(value) as T extends 'px' ? string : number
+}
+
+/**
+ * 为“无单位值”补充默认单位。
+ *
+ * 行为说明：
+ * - `number` -> `${value}${defaultUnit}`
+ * - 纯数字字符串 -> `${value}${defaultUnit}`
+ * - `null/undefined/''` -> `0${defaultUnit}`
+ * - 已带单位或其他字符串（如 `300rpx`、`20px`、`50%`、`auto`）原样返回
+ *
+ * 典型用途：
+ * - 统一“number 与纯数字字符串”的默认单位语义（如统一按 `rpx`）。
+ *
+ * @param value 输入值。
+ * @param defaultUnit 默认单位，支持 `'px' | 'rpx'`，默认 `'rpx'`。
+ * @returns 补全单位后的字符串结果。
+ */
+export function withDefaultUnit(value: number | string | null | undefined, defaultUnit: DefaultUnit = 'rpx') {
+  if (value === null || value === undefined) {
+    return `0${defaultUnit}`
+  }
+
+  if (isNumber(value)) {
+    return `${value}${defaultUnit}`
+  }
+
+  const trimmed = value.trim()
+
+  if (!trimmed) {
+    return `0${defaultUnit}`
+  }
+
+  if (isNumeric(trimmed)) {
+    return `${trimmed}${defaultUnit}`
+  }
+
+  return trimmed
+}
+
+/**
+ * 先补默认单位，再执行 `unitConvert`，用于得到稳定的数值结果。
+ *
+ * 等价逻辑：
+ * `unitConvert(withDefaultUnit(value, defaultUnit), base)`
+ *
+ * 适用场景：
+ * - 需要做数值比较（如滚动阈值判断），同时希望 `number`/纯数字字符串有明确默认单位语义。
+ *
+ * @param value 输入值。
+ * @param options 配置项：
+ * - `defaultUnit`：无单位值补充的默认单位，默认 `'rpx'`
+ * - `base`：百分比换算基准，默认 `0`
+ * @returns 转换后的数值（px 语义）。
  */
-export function addUnit(num: number | string) {
-  return Number.isNaN(Number(num)) ? `${num}` : `${num}px`
+export function unitConvertWithDefault(value: number | string | null | undefined, options: { defaultUnit?: DefaultUnit; base?: number } = {}) {
+  const { defaultUnit = 'rpx', base = 0 } = options
+  return unitConvert(withDefaultUnit(value, defaultUnit), base)
 }
 
 /**
- * 单位转换函数，将字符串数字或带有单位的字符串转换为数字
- * @param value 要转换的值，可以是字符串数字或带有单位的字符串
- * @returns 转换后的数字，如果无法转换则返回0
+ * 将长度值解析为样式字符串，仅对 `%` 做屏宽换算。
+ *
+ * 行为说明：
+ * - `number`/纯数字字符串：按 `defaultUnit` 补单位（默认补 `rpx`）
+ * - `%`：按 `uni.getSystemInfoSync().windowWidth` 换算后转为 `px`
+ * - 其他带单位值（如 `px/rpx`）：原样返回
+ *
+ * @param value 输入长度值。
+ * @param options 配置项：
+ * - `defaultUnit`：无单位值的默认单位，默认 `'rpx'`
+ * @returns 解析后的样式值字符串；当输入为空时返回空字符串。
  */
-export function unitConvert(value: string | number | null | undefined, base: number = 0): number {
-  // 如果是字符串数字
-  if (isNumeric(value)) {
-    return Number(value)
+export function resolveSizeWithScreenWidth(value: number | string | null | undefined, options: { defaultUnit?: DefaultUnit } = {}) {
+  if (value === '' || value === undefined || value === null) {
+    return ''
   }
-  // 如果有单位
-  if (isString(value)) {
-    const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
-    const results = reg.exec(value)
-    if (!value || !results) {
-      return 0
-    }
-    const unit = results[3]
-    const _value = parseFloat(value)
-    if (unit === 'rpx') {
-      return uni.upx2px(_value)
-    }
-    if (unit === 'px') {
-      return _value * 1
-    }
-    if (unit == '%') {
-      return (_value / 100) * base
-    }
-    // 如果是其他单位，可以继续添加对应的转换逻辑
+
+  const { defaultUnit = 'rpx' } = options
+  const normalized = withDefaultUnit(value, defaultUnit)
+  const trimmed = normalized.trim()
+
+  if (trimmed.endsWith('%')) {
+    const { windowWidth = 0 } = uni.getSystemInfoSync()
+    const percentInPx = unitConvert(trimmed, windowWidth)
+    return `${percentInPx * 2}rpx`
   }
-  return 0
+
+  return normalized
 }
 
 /**

package/components/composables/index.ts

@@ -10,3 +10,4 @@ export { useTouch } from './useTouch'
 export { useTranslate } from './useTranslate'
 export { useUpload } from './useUpload'
 export { useVirtualScroll } from './useVirtualScroll'
+export { useWindowResize } from './useWindowResize'

package/components/composables/usePopover.ts

@@ -1,5 +1,5 @@
 import { getCurrentInstance, ref } from 'vue'
-import { getRect, isObj } from '../common/util'
+import { getRect, isObj, unitConvert } from '../common/util'
 
 export function usePopover(visibleArrow = true) {
   const { proxy } = getCurrentInstance() as any
@@ -14,6 +14,7 @@ export function usePopover(visibleArrow = true) {
   const width = ref<number>(0)
   const height = ref<number>(0)
   const top = ref<number>(0)
+  const toPx = (value: number) => unitConvert(value, 0, { output: 'px' })
 
   function noop() {}
 
@@ -107,64 +108,67 @@ export function usePopover(visibleArrow = true) {
 
     const placements = new Map([
       // 上
-      ['top', [`left: ${verticalX}px; bottom: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']],
+      ['top', [`left: ${toPx(verticalX)}; bottom: ${toPx(verticalY)}; transform: translateX(-50%);`, 'left: 50%;']],
       [
         'top-start',
         [
-          `left: ${offsetX}px; bottom: ${verticalY}px;`,
-          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`
+          `left: ${toPx(offsetX)}; bottom: ${toPx(verticalY)};`,
+          `left: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)};`
         ]
       ],
       [
         'top-end',
         [
-          `right: ${offsetX}px; bottom: ${verticalY}px;`,
-          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`
+          `right: ${toPx(offsetX)}; bottom: ${toPx(verticalY)};`,
+          `right: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)}; transform: translateX(50%);`
         ]
       ],
       // 下
-      ['bottom', [`left: ${verticalX}px; top: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']],
+      ['bottom', [`left: ${toPx(verticalX)}; top: ${toPx(verticalY)}; transform: translateX(-50%);`, 'left: 50%;']],
       [
         'bottom-start',
-        [`left: ${offsetX}px; top: ${verticalY}px;`, `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`]
+        [
+          `left: ${toPx(offsetX)}; top: ${toPx(verticalY)};`,
+          `left: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)};`
+        ]
       ],
       [
         'bottom-end',
         [
-          `right: ${offsetX}px; top: ${verticalY}px;`,
-          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`
+          `right: ${toPx(offsetX)}; top: ${toPx(verticalY)};`,
+          `right: ${toPx((popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX)}; transform: translateX(50%);`
         ]
       ],
       // 左
-      ['left', [`right: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']],
+      ['left', [`right: ${toPx(horizontalX)}; top: ${toPx(horizontalY)}; transform: translateY(-50%);`, 'top: 50%']],
       [
         'left-start',
         [
-          `right: ${horizontalX}px; top: ${offsetY}px;`,
-          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`
+          `right: ${toPx(horizontalX)}; top: ${toPx(offsetY)};`,
+          `top: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)};`
         ]
       ],
       [
         'left-end',
         [
-          `right: ${horizontalX}px; bottom: ${offsetY}px;`,
-          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`
+          `right: ${toPx(horizontalX)}; bottom: ${toPx(offsetY)};`,
+          `bottom: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)}; transform: translateY(50%);`
         ]
       ],
       // 右
-      ['right', [`left: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']],
+      ['right', [`left: ${toPx(horizontalX)}; top: ${toPx(horizontalY)}; transform: translateY(-50%);`, 'top: 50%']],
       [
         'right-start',
         [
-          `left: ${horizontalX}px; top: ${offsetY}px;`,
-          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`
+          `left: ${toPx(horizontalX)}; top: ${toPx(offsetY)};`,
+          `top: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)};`
         ]
       ],
       [
         'right-end',
         [
-          `left: ${horizontalX}px; bottom: ${offsetY}px;`,
-          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`
+          `left: ${toPx(horizontalX)}; bottom: ${toPx(offsetY)};`,
+          `bottom: ${toPx((popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY)}; transform: translateY(50%);`
         ]
       ]
     ])

package/components/composables/useVirtualScroll.ts

@@ -4,6 +4,7 @@
 
 import { ref, computed, watch, nextTick, type Ref } from 'vue'
 import { VirtualScrollEngine } from '../oxy-virtual-scroll/virtual-scroll'
+import { unitConvert, unitConvertWithDefault } from '../common/util'
 
 export interface UseVirtualScrollOptions {
   data: Ref<any[]>
@@ -52,7 +53,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
   const displayData = computed<any[]>(() => data.value)
 
   const totalHeight = computed(() => {
-    return displayData.value.length * parseFloat(itemHeight.value)
+    return displayData.value.length * unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' })
   })
 
   // 监听数据变化
@@ -77,8 +78,8 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     }
 
     virtualEngine.value = new VirtualScrollEngine({
-      containerHeight: parseFloat(height.value),
-      itemHeight: parseFloat(itemHeight.value),
+      containerHeight: unitConvert(height.value),
+      itemHeight: unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }),
       data: displayData.value
     })
     updateVisibleData()
@@ -89,8 +90,8 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     if (!virtual.value) return
 
     virtualEngine.value = new VirtualScrollEngine({
-      containerHeight: parseFloat(height.value),
-      itemHeight: parseFloat(itemHeight.value),
+      containerHeight: unitConvert(height.value),
+      itemHeight: unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }),
       data: displayData.value
     })
   }
@@ -109,7 +110,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
   // 滚动事件处理
   function onScroll(scrollTopValue: number) {
     _scrollTop.value = scrollTopValue
-    showBackTopBtn.value = scrollTopValue > parseFloat(backToTopThreshold.value)
+    showBackTopBtn.value = scrollTopValue > unitConvertWithDefault(backToTopThreshold.value, { defaultUnit: 'rpx' })
     updateVisibleData()
   }
 
@@ -128,14 +129,14 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
 
   // 滚动到指定位置
   function scrollToPosition(position: number | string) {
-    scrollTop.value = typeof position === 'number' ? position : parseFloat(position)
+    scrollTop.value = unitConvertWithDefault(position, { defaultUnit: 'rpx' })
   }
 
   // 滚动到指定元素
   function scrollToElement(item: any) {
     const index = data.value.findIndex((o) => item[idKey.value] && o[idKey.value] && o[idKey.value] === item[idKey.value])
     if (index > 0) {
-      const scrollDistance = parseFloat(itemHeight.value) * index
+      const scrollDistance = unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }) * index
       scrollToPosition(scrollDistance)
     }
   }
@@ -144,7 +145,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
   function scrollToElementById(id: string | number) {
     const index = data.value.findIndex((o) => id && o[idKey.value] && o[idKey.value] === id)
     if (index > 0) {
-      const scrollDistance = parseFloat(itemHeight.value) * index
+      const scrollDistance = unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }) * index
       scrollToPosition(scrollDistance)
     }
   }

package/components/composables/useWindowResize.ts

@@ -0,0 +1,35 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+export interface WindowResizeResult {
+  size?: {
+    windowWidth?: number
+    windowHeight?: number
+  }
+  windowWidth?: number
+  windowHeight?: number
+}
+
+export type WindowResizeCallback = (result?: WindowResizeResult) => void | Promise<void>
+
+interface UseWindowResizeOptions {
+  immediate?: boolean
+}
+
+export function useWindowResize(callback: WindowResizeCallback, options: UseWindowResizeOptions = {}) {
+  const { immediate = false } = options
+
+  onMounted(() => {
+    if (immediate) {
+      callback()
+    }
+    if (typeof uni.onWindowResize === 'function') {
+      uni.onWindowResize(callback)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (typeof uni.offWindowResize === 'function') {
+      uni.offWindowResize(callback)
+    }
+  })
+}

package/components/oxy-action-sheet/index.scss

@@ -50,16 +50,29 @@
   border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
 }
 
+:deep(.oxy-action-sheet__popup--float) {
+  border-radius: 0 !important;
+  background: transparent !important;
+  overflow: visible !important;
+}
+
 @include b(action-sheet) {
   background-color: $-color-white;
-  padding-bottom: 1px;
+  padding-bottom: 2rpx;
+  margin-bottom: var(--window-bottom);
+
+  @include when(float) {
+    margin: 0 20rpx calc(var(--window-bottom) + 20rpx);
+    border-radius: $-action-sheet-radius;
+    overflow: hidden;
+  }
 
   @include edeep(popup) {
     border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
   }
 
   @include e(actions) {
-    padding: 8px 0;
+    padding: 16rpx 0;
     max-height: 50vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -110,14 +123,14 @@
 
   @include e(subname) {
     display: inline-block;
-    margin-left: 4px;
+    margin-left: 8rpx;
     font-size: $-action-sheet-subname-fs;
     color: $-action-sheet-subname-color;
   }
 
   @include e(cancel) {
     display: block;
-    width: calc(100% - 48px);
+    width: calc(100% - 96rpx);
     line-height: $-action-sheet-cancel-height;
     padding: 0;
     color: $-action-sheet-cancel-color;
@@ -127,7 +140,7 @@
     border: none;
     background: $-action-sheet-cancel-bg;
     outline: none;
-    margin: 0 auto 24px;
+    margin: 0 auto 48rpx;
     font-weight: $-action-sheet-weight;
 
     &:active {
@@ -160,15 +173,15 @@
   }
 
   @include e(panels) {
-    height: 84px;
+    height: 168rpx;
     overflow-y: hidden;
 
     &:first-of-type {
-      margin-top: 20px;
+      margin-top: 40rpx;
     }
 
     &:last-of-type {
-      margin-bottom: 12px;
+      margin-bottom: 24rpx;
     }
   }
 
@@ -179,7 +192,7 @@
   }
 
   @include e(panel) {
-    width: 88px;
+    width: 176rpx;
     flex: 0 0 auto;
     display: inline-block;
     padding: $-action-sheet-panel-padding;
@@ -190,7 +203,7 @@
     width: $-action-sheet-panel-img-fs;
     height: $-action-sheet-panel-img-fs;
     margin: 0 auto;
-    margin-bottom: 7px;
+    margin-bottom: 14rpx;
     border-radius: $-action-sheet-panel-img-radius;
   }
 
@@ -201,4 +214,4 @@
     color: $-action-sheet-color;
     @include lineEllipsis;
   }
-}
+}

package/components/oxy-action-sheet/oxy-action-sheet.vue

@@ -1,8 +1,9 @@
 <template>
   <view>
     <oxy-popup
-      custom-class="oxy-action-sheet__popup"
-      :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
+      :custom-class="popupClass"
+      :custom-style="customStyle"
+      :max-width="maxWidth"
       v-model="showPopup"
       :duration="duration"
       position="bottom"
@@ -17,20 +18,13 @@
       @click-modal="handleClickModal"
       :z-index="zIndex"
     >
-      <view
-        :class="`oxy-action-sheet ${customClass}`"
-        :style="`${
-          (actions && actions.length) || (panels && panels.length)
-            ? 'margin: 0 10px calc(var(--window-bottom) + 10px) 10px; border-radius: 16px;'
-            : 'margin-bottom: var(--window-bottom);'
-        } ${customStyle}`"
-      >
+      <view :class="['oxy-action-sheet', { 'is-float': isFloatMode }, customClass]">
         <view v-if="title" :class="`oxy-action-sheet__header ${customHeaderClass}`">
           {{ title }}
           <oxy-icon custom-class="oxy-action-sheet__close" name="add" @click="close" />
         </view>
         <view class="oxy-action-sheet__actions" v-if="actions && actions.length">
-          <button
+          <view
             v-for="(action, rowIndex) in actions"
             :key="rowIndex"
             :class="`oxy-action-sheet__action ${action.disabled ? 'oxy-action-sheet__action--disabled' : ''}  ${
@@ -42,20 +36,20 @@
             <oxy-loading custom-class="`oxy-action-sheet__action-loading" v-if="action.loading" />
             <view v-else class="oxy-action-sheet__name">{{ action.name }}</view>
             <view v-if="!action.loading && action.subname" class="oxy-action-sheet__subname">{{ action.subname }}</view>
-          </button>
+          </view>
         </view>
         <view v-if="formatPanels && formatPanels.length">
           <view v-for="(panel, rowIndex) in formatPanels" :key="rowIndex" class="oxy-action-sheet__panels">
             <view class="oxy-action-sheet__panels-content">
               <view v-for="(col, colIndex) in panel" :key="colIndex" class="oxy-action-sheet__panel" @click="select(rowIndex, 'panels', colIndex)">
-                <image class="oxy-action-sheet__panel-img" :src="(col as any).iconUrl" />
-                <view class="oxy-action-sheet__panel-title">{{ (col as any).title }}</view>
+                <image class="oxy-action-sheet__panel-img" :src="col.iconUrl" />
+                <view class="oxy-action-sheet__panel-title">{{ col.title }}</view>
               </view>
             </view>
           </view>
         </view>
         <slot />
-        <button v-if="cancelText" class="oxy-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</button>
+        <view v-if="cancelText" class="oxy-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</view>
       </view>
     </oxy-popup>
   </view>
@@ -75,17 +69,25 @@ export default {
 import OxyPopup from '../oxy-popup/oxy-popup.vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyLoading from '../oxy-loading/oxy-loading.vue'
-import { watch, ref } from 'vue'
+import { computed, watch, ref } from 'vue'
 import { actionSheetProps, type Panel } from './types'
 import { isArray } from '../common/util'
 
 const props = defineProps(actionSheetProps)
 const emit = defineEmits(['select', 'click-modal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
 
-const formatPanels = ref<Array<Panel> | Array<Panel[]>>([])
+const formatPanels = ref<Panel[][]>([])
 
 const showPopup = ref<boolean>(false)
 
+const isFloatMode = computed(() => {
+  return !!((props.actions && props.actions.length) || (props.panels && props.panels.length))
+})
+
+const popupClass = computed(() => {
+  return `oxy-action-sheet__popup ${isFloatMode.value ? 'oxy-action-sheet__popup--float' : ''}`
+})
+
 watch(() => props.panels, computedValue, { deep: true, immediate: true })
 
 watch(
@@ -113,13 +115,19 @@ function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number)
       index: rowIndex
     })
   } else if (isPanelArray()) {
+    if (typeof colIndex !== 'number') {
+      return
+    }
     emit('select', {
-      item: props.panels[Number(colIndex)],
+      item: props.panels[colIndex],
       index: colIndex
     })
   } else {
+    if (typeof colIndex !== 'number') {
+      return
+    }
     emit('select', {
-      item: (props.panels as Panel[][])[rowIndex][Number(colIndex)],
+      item: (props.panels as Panel[][])[rowIndex][colIndex],
       rowIndex,
       colIndex
     })

package/components/oxy-action-sheet/types.ts

@@ -95,6 +95,13 @@ export const actionSheetProps = {
    * @type {number}
    */
   zIndex: makeNumberProp(10),
+  /**
+   * 面板最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   * @default '1200rpx'
+   * @type {string}
+   */
+  maxWidth: makeStringProp('1200rpx'),
   /**
    * 弹层内容懒渲染，触发展示时才渲染内容
    * @default true