oxy-uni-ui 1.2.0 → 2.0.0

package/components/common/path.ts

@@ -0,0 +1,9 @@
+/**
+ * 获取当前页面路径
+ * @returns 当前页面路径
+ */
+export function getCurrentPath() {
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  return currentPage?.route || ''
+}

package/components/common/util.ts

@@ -16,13 +16,199 @@ function s4() {
     .substring(1)
 }
 
+type UnitConvertOutput = 'number' | 'px'
+type DefaultUnit = 'px' | 'rpx'
+
+/**
+ * 通用单位转换函数。
+ *
+ * 支持输入：
+ * - `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
+}
+
 /**
- * @description 对num自动填充px
- * @param {Number} num
- * @return {string} num+px
+ * 为“无单位值”补充默认单位。
+ *
+ * 行为说明：
+ * - `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 addUnit(num: number | string) {
-  return Number.isNaN(Number(num)) ? `${num}` : `${num}px`
+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 unitConvertWithDefault(value: number | string | null | undefined, options: { defaultUnit?: DefaultUnit; base?: number } = {}) {
+  const { defaultUnit = 'rpx', base = 0 } = options
+  return unitConvert(withDefaultUnit(value, defaultUnit), base)
+}
+
+/**
+ * 将长度值解析为样式字符串，仅对 `%` 做屏宽换算。
+ *
+ * 行为说明：
+ * - `number`/纯数字字符串：按 `defaultUnit` 补单位（默认补 `rpx`）
+ * - `%`：按 `uni.getSystemInfoSync().windowWidth` 换算后转为 `px`
+ * - 其他带单位值（如 `px/rpx`）：原样返回
+ *
+ * @param value 输入长度值。
+ * @param options 配置项：
+ * - `defaultUnit`：无单位值的默认单位，默认 `'rpx'`
+ * @returns 解析后的样式值字符串；当输入为空时返回空字符串。
+ */
+export function resolveSizeWithScreenWidth(value: number | string | null | undefined, options: { defaultUnit?: DefaultUnit } = {}) {
+  if (value === '' || value === undefined || value === null) {
+    return ''
+  }
+
+  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 normalized
 }
 
 /**
@@ -335,6 +521,15 @@ export function isNumber(value: any): value is number {
   return getType(value) === 'number'
 }
 
+/**
+ * 检查一个值是否为数字类型或表示数字的字符串
+ * @param value 要检查的值，可以是 string 类型或 number 类型
+ * @returns 如果值是数字类型或表示数字的字符串，则返回 true；否则返回 false
+ */
+export function isNumeric(value: any): boolean {
+  return /^(-)?\d+(\.\d+)?$/.test(value)
+}
+
 /**
  * 检查给定值是否为 Promise 对象。
  * @param {unknown} value 要检查的值

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/useGlobalLoading.ts

@@ -0,0 +1,42 @@
+import type { ToastOptions } from '../oxy-toast/types'
+import { deepMerge } from '../common/util'
+import { getCurrentPath } from '../common/path'
+
+import { defineStore } from 'pinia'
+
+interface GlobalLoading {
+  loadingOptions: ToastOptions
+  currentPage: string
+}
+
+const defaultOptions: ToastOptions = {
+  show: false
+}
+export const useGlobalLoading = defineStore('global-loading', {
+  state: (): GlobalLoading => ({
+    loadingOptions: defaultOptions,
+    currentPage: ''
+  }),
+  getters: {},
+  actions: {
+    // 加载提示
+    loading(option: ToastOptions | string) {
+      this.currentPage = getCurrentPath()
+      this.loadingOptions = deepMerge(
+        {
+          iconName: 'loading',
+          duration: 0,
+          cover: true,
+          position: 'middle',
+          show: true
+        },
+        typeof option === 'string' ? { msg: option } : option
+      ) as ToastOptions
+    },
+    // 关闭Toast
+    close() {
+      this.loadingOptions = defaultOptions
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useGlobalMessage.ts

@@ -0,0 +1,48 @@
+import type { MessageOptions, MessageResult } from '../oxy-message-box/types'
+import { deepMerge, isString } from '../common/util'
+import { defineStore } from 'pinia'
+import { getCurrentPath } from '../common/path'
+
+export type GlobalMessageOptions = MessageOptions & {
+  success?: (res: MessageResult) => void
+  fail?: (res: MessageResult) => void
+}
+
+interface GlobalMessage {
+  messageOptions: GlobalMessageOptions | null
+  currentPage: string
+}
+
+export const useGlobalMessage = defineStore('global-message', {
+  state: (): GlobalMessage => ({
+    messageOptions: null,
+    currentPage: ''
+  }),
+  actions: {
+    show(option: GlobalMessageOptions | string) {
+      this.currentPage = getCurrentPath()
+      this.messageOptions = {
+        ...(isString(option) ? { title: option } : option)
+      }
+    },
+    alert(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'alert' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = false
+      this.show(messageOptions)
+    },
+    confirm(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'confirm' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = true
+      this.show(messageOptions)
+    },
+    prompt(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'prompt' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = true
+      this.show(messageOptions)
+    },
+    close() {
+      this.messageOptions = null
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useGlobalToast.ts

@@ -0,0 +1,84 @@
+import type { ToastOptions } from '../oxy-toast/types'
+import { deepMerge } from '../common/util'
+import { defineStore } from 'pinia'
+
+import { getCurrentPath } from '../common/path'
+
+interface GlobalToast {
+  toastOptions: ToastOptions
+  currentPage: string
+}
+
+const defaultOptions: ToastOptions = {
+  duration: 2000,
+  show: false
+}
+export const useGlobalToast = defineStore('global-toast', {
+  state: (): GlobalToast => ({
+    toastOptions: defaultOptions,
+    currentPage: ''
+  }),
+  getters: {},
+  actions: {
+    // 打开Toast
+    show(option: ToastOptions | string) {
+      this.currentPage = getCurrentPath()
+      const options = deepMerge(defaultOptions, typeof option === 'string' ? { msg: option } : option) as ToastOptions
+      this.toastOptions = deepMerge(options, {
+        show: true,
+        position: options.position || 'middle'
+      }) as ToastOptions
+    },
+    // 成功提示
+    success(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'success',
+            duration: 1500
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 关闭提示
+    error(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'error',
+            direction: 'vertical'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 常规提示
+    info(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'info'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 警告提示
+    warning(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'warning'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 关闭Toast
+    close() {
+      this.toastOptions = defaultOptions
+      this.currentPage = ''
+    }
+  }
+})

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[]>
@@ -41,6 +42,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
 
   // 响应式数据
   const scrollTop = ref<number>(0)
+  const _scrollTop = ref<number>(0)
   const showBackTopBtn = ref<boolean>(false)
   const virtualData = ref<any[]>([])
   const startIndex = ref<number>(0)
@@ -51,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' })
   })
 
   // 监听数据变化
@@ -76,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()
@@ -88,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
     })
   }
@@ -99,7 +101,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     if (!virtual.value) return // 非虚拟模式不处理
 
     if (virtualEngine.value) {
-      const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(scrollTop.value || 0)
+      const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(_scrollTop.value || 0)
       virtualData.value = visibleData
       virtualOffsetY.value = offsetY
     }
@@ -107,8 +109,8 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
 
   // 滚动事件处理
   function onScroll(scrollTopValue: number) {
-    scrollTop.value = scrollTopValue
-    showBackTopBtn.value = scrollTopValue > parseFloat(backToTopThreshold.value)
+    _scrollTop.value = scrollTopValue
+    showBackTopBtn.value = scrollTopValue > unitConvertWithDefault(backToTopThreshold.value, { defaultUnit: 'rpx' })
     updateVisibleData()
   }
 
@@ -127,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)
     }
   }
@@ -143,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)
+    }
+  })
+}