uview-pro 0.5.4 → 0.5.5

package/changelog.md

@@ -1,24 +1,40 @@
-## 0.5.4（2026-01-30）
-
-### 🐛 Bug Fixes | Bug 修复
-
-- **types:** 优化组件库类型定义和代码健壮性 ([e83eac8](https://github.com/anyup/uView-Pro/commit/e83eac8192476dea5e2d4e5b8b3c68b7da992673))
-- **u-navbar:** 修复状态栏高度获取的条件判断，区分鸿蒙、微信小程序和其他 ([b13d112](https://github.com/anyup/uView-Pro/commit/b13d112be80c46f62bfa343a089f2de70a00f774))
+## 0.5.5（2026-02-02）
 
 ### ✨ Features | 新功能
 
-- **u-loading:** 增强u-loading的自定义样式功能 ([c9151ce](https://github.com/anyup/uView-Pro/commit/c9151ce4bee44c762bd7970ab280184c730e97b1))
-- **u-toast:** 新增函数式调用API和全局toast功能（#101） ([b8c8fbf](https://github.com/anyup/uView-Pro/commit/b8c8fbff70c14fe0a6106794a638e450cecbeddf))
-- **components:** 优化组件类型安全 ([02b638f](https://github.com/anyup/uView-Pro/commit/02b638f6e251c9b52e5e3ebb1e40d644d895308a))
+- **u-toast:** 新增页面级toast功能并优化loading逻辑 ([4eae5b7](https://github.com/anyup/uView-Pro/commit/4eae5b7ef5d4494c4619bee383e62490994b4317))
+- **useModal:** 新增useModal函数式调用API和全局modal功能（#101） ([724edf3](https://github.com/anyup/uView-Pro/commit/724edf3cd69607a6d4e33954f8d2d701f9502ff3))
+- **locale:** 新增语言配置的标签字段label和区域设置字段locale ([49ba6cb](https://github.com/anyup/uView-Pro/commit/49ba6cbea6b53712496e465dd40654af7608a02d))
 
 ### ♻️ Code Refactoring | 代码重构
 
-- **demo:** 移除多余的toast引用 ([67b2677](https://github.com/anyup/uView-Pro/commit/67b26772eb67e9e2b830c95359688b0116395452))
+- **demo:** 调整demo演示中吸顶组件默认偏移量为200 ([165da80](https://github.com/anyup/uView-Pro/commit/165da80eb9eec54cf1a5fa8511d82e2b3d11fed1))
 
 ### 👥 Contributors
 
 <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
 
+## 0.5.4（2026-01-30）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **types:** 优化组件库类型定义和代码健壮性 ([e83eac8](https://github.com/anyup/uView-Pro/commit/e83eac8192476dea5e2d4e5b8b3c68b7da992673))
+- **u-navbar:** 修复状态栏高度获取的条件判断，区分鸿蒙、微信小程序和其他 ([b13d112](https://github.com/anyup/uView-Pro/commit/b13d112be80c46f62bfa343a089f2de70a00f774))
+
+### ✨ Features | 新功能
+
+- **u-loading:** 增强u-loading的自定义样式功能 ([c9151ce](https://github.com/anyup/uView-Pro/commit/c9151ce4bee44c762bd7970ab280184c730e97b1))
+- **u-toast:** 新增函数式调用API和全局toast功能（#101） ([b8c8fbf](https://github.com/anyup/uView-Pro/commit/b8c8fbff70c14fe0a6106794a638e450cecbeddf))
+- **components:** 优化组件类型安全 ([02b638f](https://github.com/anyup/uView-Pro/commit/02b638f6e251c9b52e5e3ebb1e40d644d895308a))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **demo:** 移除多余的toast引用 ([67b2677](https://github.com/anyup/uView-Pro/commit/67b26772eb67e9e2b830c95359688b0116395452))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
+
 ## 0.5.3（2026-01-26）
 
 ### ♻️ Code Refactoring | 代码重构

package/components/u-modal/service.ts

@@ -0,0 +1,29 @@
+/**
+ * u-modal 函数式调用事件名（全平台）
+ * @description
+ * - useModal() 通过 uni.$emit 派发事件
+ * - <u-modal /> 通过 uni.$on 监听事件并转调自身 show/hide
+ */
+
+import type { ModalProps } from './types';
+
+// 普通（页面级）modal 事件
+export const U_MODAL_EVENT_SHOW = 'uview-pro:u-modal:show';
+export const U_MODAL_EVENT_HIDE = 'uview-pro:u-modal:hide';
+export const U_MODAL_EVENT_CLEAR_LOADING = 'uview-pro:u-modal:clear-loading';
+
+// 全局（App 根部）modal 事件，供 useModal() 使用
+export const U_MODAL_GLOBAL_EVENT_SHOW = 'uview-pro:u-modal:global:show';
+export const U_MODAL_GLOBAL_EVENT_HIDE = 'uview-pro:u-modal:global:hide';
+export const U_MODAL_GLOBAL_EVENT_CLEAR_LOADING = 'uview-pro:u-modal:global:clear-loading';
+
+/**
+ * u-modal 函数式调用载荷类型
+ * @description 完整覆盖 u-modal 的所有 props（除 modelValue 外）
+ */
+export type ModalPayload = Partial<Omit<ModalProps, 'modelValue'>> & {
+    /** 确认回调 */
+    onConfirm?: () => void;
+    /** 取消回调 */
+    onCancel?: () => void;
+};

package/components/u-modal/types.ts

@@ -33,7 +33,7 @@ export const ModalProps = {
     /** 弹窗内容 */
     content: {
         type: String,
-        default: () => t('uModal.content')
+        default: ''
     },
     /** 是否显示标题 */
     showTitle: {
@@ -114,6 +114,16 @@ export const ModalProps = {
     negativeTop: {
         type: [String, Number] as PropType<number | string>,
         default: 0
+    },
+    /** 是否作为全局根部 modal（通常放在 App.vue 中，给 useModal() 使用） */
+    global: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否作为页面级 modal（通常放在页面中，给 useModal({ page: true }) 使用） */
+    page: {
+        type: Boolean,
+        default: false
     }
 };
 

package/components/u-modal/u-modal.vue

@@ -1,50 +1,61 @@
 <template>
     <view>
         <u-popup
-            :zoom="zoom"
+            v-model="popupValue"
             mode="center"
+            :zoom="effectiveConfig.zoom"
             :popup="false"
             :z-index="uZIndex"
-            v-model="popupValue"
-            :length="width"
-            :mask-close-able="maskCloseAble"
-            :border-radius="borderRadius"
+            :length="effectiveConfig.width"
+            :mask-close-able="effectiveConfig.maskCloseAble"
+            :border-radius="effectiveConfig.borderRadius"
+            :negative-top="effectiveConfig.negativeTop"
+            :custom-class="effectiveConfig.customClass"
             @close="popupClose"
-            :negative-top="negativeTop"
-            :custom-class="customClass"
         >
-            <view class="u-model" :style="$u.toStyle(customStyle)">
-                <view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
+            <view class="u-model" :style="$u.toStyle(effectiveConfig.customStyle)">
+                <view
+                    v-if="effectiveConfig.showTitle"
+                    class="u-model__title u-line-1"
+                    :style="$u.toStyle(effectiveConfig.titleStyle)"
+                >
+                    {{ effectiveConfig.title }}
+                </view>
                 <view class="u-model__content">
-                    <view :style="[contentStyle]" v-if="slots.default">
+                    <view v-if="slots.default" :style="$u.toStyle(effectiveConfig.contentStyle)">
                         <slot />
                     </view>
-                    <view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
+                    <view v-else class="u-model__content__message" :style="$u.toStyle(effectiveConfig.contentStyle)">
+                        {{ effectiveConfig.content }}
+                    </view>
                 </view>
-                <view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
+                <view
+                    v-if="effectiveConfig.showCancelButton || effectiveConfig.showConfirmButton"
+                    class="u-model__footer u-border-top"
+                >
                     <view
-                        v-if="showCancelButton"
+                        v-if="effectiveConfig.showCancelButton"
                         :hover-stay-time="100"
                         hover-class="u-model__btn--hover"
                         class="u-model__footer__button"
-                        :style="[cancelBtnStyle]"
+                        :style="$u.toStyle(cancelBtnStyle)"
                         @tap="cancel"
                     >
-                        {{ cancelText }}
+                        {{ effectiveConfig.cancelText }}
                     </view>
                     <view
-                        v-if="showConfirmButton || slots['confirm-button']"
-                        :hover-stay-time="100"
-                        :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
+                        v-if="effectiveConfig.showConfirmButton || slots['confirm-button']"
                         class="u-model__footer__button hairline-left"
+                        :hover-stay-time="100"
+                        :hover-class="effectiveConfig.asyncClose ? 'none' : 'u-model__btn--hover'"
                         :style="[confirmBtnStyle]"
                         @tap="confirm"
                     >
                         <slot v-if="slots['confirm-button']" name="confirm-button"></slot>
                         <template v-else>
-                            <u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
+                            <u-loading mode="circle" :color="effectiveConfig.confirmColor" v-if="loading"></u-loading>
                             <template v-else>
-                                {{ confirmText }}
+                                {{ effectiveConfig.confirmText }}
                             </template>
                         </template>
                     </view>
@@ -68,9 +79,18 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, useSlots } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
 import { $u } from '../..';
 import { ModalProps } from './types';
+import {
+    U_MODAL_EVENT_CLEAR_LOADING,
+    U_MODAL_EVENT_HIDE,
+    U_MODAL_EVENT_SHOW,
+    U_MODAL_GLOBAL_EVENT_CLEAR_LOADING,
+    U_MODAL_GLOBAL_EVENT_HIDE,
+    U_MODAL_GLOBAL_EVENT_SHOW,
+    type ModalPayload
+} from './service';
 
 /**
  * modal 模态框
@@ -108,23 +128,99 @@ const slots = useSlots();
 
 // 确认按钮是否正在加载中
 const loading = ref(false);
+const isGlobal = computed(() => props.global);
+const isPage = computed(() => props.page);
+const showEvent = computed(() => (isGlobal.value ? U_MODAL_GLOBAL_EVENT_SHOW : isPage.value ? U_MODAL_EVENT_SHOW : ''));
+const hideEvent = computed(() => (isGlobal.value ? U_MODAL_GLOBAL_EVENT_HIDE : isPage.value ? U_MODAL_EVENT_HIDE : ''));
+const clearLoadingEvent = computed(() =>
+    isGlobal.value ? U_MODAL_GLOBAL_EVENT_CLEAR_LOADING : isPage.value ? U_MODAL_EVENT_CLEAR_LOADING : ''
+);
+
+// 存储用户传入的回调函数
+let userOnConfirm: (() => void) | null = null;
+let userOnCancel: (() => void) | null = null;
+
+// 需要与 effectiveConfig 合并的 props 键名列表（用于函数式调用）
+const MERGE_PROPS_KEYS = [
+    'title',
+    'content',
+    'showTitle',
+    'showConfirmButton',
+    'showCancelButton',
+    'confirmText',
+    'cancelText',
+    'confirmColor',
+    'cancelColor',
+    'confirmStyle',
+    'cancelStyle',
+    'titleStyle',
+    'contentStyle',
+    'asyncClose',
+    'borderRadius',
+    'width',
+    'zoom',
+    'maskCloseAble',
+    'negativeTop',
+    'zIndex',
+    'customStyle',
+    'customClass'
+] as const;
+
+// 函数式调用时的临时配置
+const tempConfig = ref<Partial<ModalPayload>>({});
+
+// 函数式调用时的内部显示状态（用于 global 模式）
+const internalShow = ref(false);
 
+// 有效的配置（函数式调用时合并 tempConfig 和 props，v-model 时使用 props）
+const effectiveConfig = computed(() => {
+    // 如果有临时配置（函数式调用），合并用户配置与 props 默认值
+    if (Object.keys(tempConfig.value).length > 0) {
+        const result: Record<string, any> = {};
+        for (const key of MERGE_PROPS_KEYS) {
+            // 用户配置优先，否则使用 props 默认值
+            result[key] = (tempConfig.value as Record<string, any>)[key] ?? (props as Record<string, any>)[key];
+        }
+        result.zIndex = tempConfig.value.zIndex ?? props.zIndex ?? $u.zIndex.popup;
+        return result;
+    }
+    // v-model 直接控制时使用 props
+    return props;
+});
+// 取消按钮样式
 const cancelBtnStyle = computed(() => {
-    return Object.assign({ color: props.cancelColor }, props.cancelStyle);
+    return Object.assign({ color: effectiveConfig.value.cancelColor }, effectiveConfig.value.cancelStyle);
 });
+// 确认按钮样式
 const confirmBtnStyle = computed(() => {
-    return Object.assign({ color: props.confirmColor }, props.confirmStyle);
+    return Object.assign({ color: effectiveConfig.value.confirmColor }, effectiveConfig.value.confirmStyle);
 });
-const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.popup));
-
+// 弹窗的样式
+const uZIndex = computed(() => effectiveConfig.value.zIndex ?? $u.zIndex.popup);
+// 是否使用内部状态控制显示（global 模式）
+const useInternalShow = computed(() => isGlobal.value || isPage.value);
+// 最终显示状态
+const finalShow = computed(() => {
+    if (useInternalShow.value) {
+        return internalShow.value;
+    }
+    return props.modelValue;
+});
+// u-popup 绑定的值
 const popupValue = computed({
-    get: () => props.modelValue,
-    set: (val: boolean) => emit('update:modelValue', val)
+    get: () => finalShow.value,
+    set: (val: boolean) => {
+        if (useInternalShow.value) {
+            internalShow.value = val;
+        } else {
+            emit('update:modelValue', val);
+        }
+    }
 });
 
 // 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态，避免下次打开的时候，状态混乱
 watch(
-    () => props.modelValue,
+    () => popupValue.value,
     n => {
         if (n === true) loading.value = false;
     }
@@ -134,21 +230,33 @@ watch(
  * 确认按钮点击事件
  */
 function confirm() {
+    // 先调用回调，再重置配置
+    const onConfirm = userOnConfirm;
     // 异步关闭
-    if (props.asyncClose) {
+    if (effectiveConfig.value.asyncClose) {
         loading.value = true;
     } else {
-        emit('update:modelValue', false);
+        popupValue.value = false;
+        // 延迟重置配置，避免闪屏
+        setTimeout(() => resetTempConfig(), 300);
     }
     emit('confirm');
+    // 调用函数式调用时用户传入的回调
+    onConfirm?.();
 }
 
 /**
  * 取消按钮点击事件
  */
 function cancel() {
+    // 先调用回调，再重置配置
+    const onCancel = userOnCancel;
+    // 延迟重置配置，避免闪屏
+    setTimeout(() => resetTempConfig(), 300);
     emit('cancel');
-    emit('update:modelValue', false);
+    popupValue.value = false;
+    // 调用函数式调用时用户传入的回调
+    onCancel?.();
     // 目前popup弹窗关闭有一个延时操作，此处做一个延时
     // 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
     setTimeout(() => {
@@ -160,7 +268,8 @@ function cancel() {
  * 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
  */
 function popupClose() {
-    emit('update:modelValue', false);
+    popupValue.value = false;
+    resetTempConfig();
 }
 
 /**
@@ -170,6 +279,63 @@ function clearLoading() {
     loading.value = false;
 }
 
+/**
+ * 函数式调用显示 modal
+ */
+function onServiceShow(payload: ModalPayload) {
+    // 保存回调函数
+    userOnConfirm = payload.onConfirm ?? null;
+    userOnCancel = payload.onCancel ?? null;
+
+    // 只保存用户传入的配置（过滤掉回调）
+    const { onConfirm, onCancel, ...rest } = payload;
+    tempConfig.value = rest;
+
+    // 使用内部状态控制显示
+    internalShow.value = true;
+}
+
+/**
+ * 函数式调用关闭 modal
+ */
+function onServiceHide() {
+    internalShow.value = false;
+    resetTempConfig();
+}
+
+/**
+ * 重置临时配置
+ */
+function resetTempConfig() {
+    tempConfig.value = {};
+    userOnConfirm = null;
+    userOnCancel = null;
+}
+
+onMounted(() => {
+    if (showEvent.value) {
+        uni?.$on && uni.$on(showEvent.value, onServiceShow);
+    }
+    if (hideEvent.value) {
+        uni?.$on && uni.$on(hideEvent.value, onServiceHide);
+    }
+    if (clearLoadingEvent.value) {
+        uni?.$on && uni.$on(clearLoadingEvent.value, clearLoading);
+    }
+});
+
+onBeforeUnmount(() => {
+    if (showEvent.value) {
+        uni?.$off && uni.$off(showEvent.value, onServiceShow);
+    }
+    if (hideEvent.value) {
+        uni?.$off && uni.$off(hideEvent.value, onServiceHide);
+    }
+    if (clearLoadingEvent.value) {
+        uni?.$off && uni.$off(clearLoadingEvent.value, clearLoading);
+    }
+});
+
 defineExpose({
     clearLoading
 });

package/components/u-toast/types.ts

@@ -13,7 +13,7 @@ export const ToastProps = {
     zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.toast },
     /** 提示类型，success/warning/error/loading 等 */
     type: { type: String as PropType<ThemeType | 'default'>, default: '' },
-    /** 显示时长，单位ms */
+    /** 显示时长，单位ms。设为 0 表示不自动关闭，需手动调用 hide/close 方法 */
     duration: { type: Number, default: 2000 },
     /** 是否显示图标 */
     icon: { type: Boolean, default: true },
@@ -31,6 +31,8 @@ export const ToastProps = {
     params: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     /** 是否作为全局根部 toast（通常放在 App.vue 中，给 useToast() 使用） */
     global: { type: Boolean, default: false },
+    /** 是否作为页面级 toast（通常放在页面中，给 useToast({ page: true }) 使用） */
+    page: { type: Boolean, default: false },
     /** 是否为loading “常驻” */
     loading: { type: Boolean, default: false }
 };

package/components/u-toast/u-toast.vue

@@ -112,6 +112,7 @@ const uZIndex = computed(() => {
 
 /**
  * 显示toast组件，由父组件通过ref.show(options)形式调用
+ * @description 当 duration 为 0 或不传时，表示不自动关闭，需要手动调用 hide/close 方法关闭
  */
 function show(options: any) {
     // 不将结果合并到config变量，避免多次调用u-toast，前后的配置造成混乱
@@ -122,15 +123,18 @@ function show(options: any) {
         timer = null;
     }
     isShow.value = true;
-    timer = setTimeout(() => {
-        // 倒计时结束，清除定时器，隐藏toast组件
-        isShow.value = false;
-        clearTimeout(timer!);
-        timer = null;
-        // 判断是否存在callback方法，如果存在就执行
-        typeof tmpConfig.value.callback === 'function' && tmpConfig.value.callback();
-        timeEnd();
-    }, tmpConfig.value.duration);
+    // duration 为 0、undefined 或小于等于 0 时，表示不自动关闭，需要手动调用 hide/close
+    if (tmpConfig.value.duration > 0) {
+        timer = setTimeout(() => {
+            // 倒计时结束，清除定时器，隐藏toast组件
+            isShow.value = false;
+            clearTimeout(timer!);
+            timer = null;
+            // 判断是否存在callback方法，如果存在就执行
+            typeof tmpConfig.value.callback === 'function' && tmpConfig.value.callback();
+            timeEnd();
+        }, tmpConfig.value.duration);
+    }
 }
 /**
  * 隐藏toast组件，由父组件通过ref.hide()形式调用
@@ -194,20 +198,28 @@ function onServiceHide() {
 
 // 是否为 App 根部的“全局 toast”
 const isGlobal = computed(() => props.global);
+// 是否为页面级 toast
+const isPage = computed(() => props.page);
 
-const showEvent = computed(() => (isGlobal.value ? U_TOAST_GLOBAL_EVENT_SHOW : U_TOAST_EVENT_SHOW));
-const hideEvent = computed(() => (isGlobal.value ? U_TOAST_GLOBAL_EVENT_HIDE : U_TOAST_EVENT_HIDE));
+// 显示事件
+const showEvent = computed(() => (isGlobal.value ? U_TOAST_GLOBAL_EVENT_SHOW : isPage.value ? U_TOAST_EVENT_SHOW : ''));
+// 隐藏事件
+const hideEvent = computed(() => (isGlobal.value ? U_TOAST_GLOBAL_EVENT_HIDE : isPage.value ? U_TOAST_EVENT_HIDE : ''));
 
 onMounted(() => {
-    if (isGlobal.value) {
+    if (showEvent.value) {
         uni?.$on && uni.$on(showEvent.value, onServiceShow);
+    }
+    if (hideEvent.value) {
         uni?.$on && uni.$on(hideEvent.value, onServiceHide);
     }
 });
 
 onBeforeUnmount(() => {
-    if (isGlobal.value) {
+    if (showEvent.value) {
         uni?.$off && uni.$off(showEvent.value, onServiceShow);
+    }
+    if (hideEvent.value) {
         uni?.$off && uni.$off(hideEvent.value, onServiceHide);
     }
 });

package/libs/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './useLocale';
 export * from './useDebounce';
 export * from './useThrottle';
 export * from './useToast';
+export * from './useModal';

package/libs/hooks/useModal.ts

@@ -0,0 +1,105 @@
+import {
+    U_MODAL_EVENT_SHOW,
+    U_MODAL_EVENT_HIDE,
+    U_MODAL_EVENT_CLEAR_LOADING,
+    U_MODAL_GLOBAL_EVENT_SHOW,
+    U_MODAL_GLOBAL_EVENT_HIDE,
+    U_MODAL_GLOBAL_EVENT_CLEAR_LOADING,
+    type ModalPayload
+} from '../../components/u-modal/service';
+
+export type UseModalShowOptions = ModalPayload;
+
+export type UseModal = {
+    /**
+     * 显示 modal
+     * - show('标题')
+     * - show({ title, content, showCancelButton, ... })
+     */
+    show: (contentOrOptions: string | UseModalShowOptions) => void;
+    /**
+     * 显示 confirm 类型的 modal（带确认和取消按钮）
+     * - confirm('标题')
+     * - confirm({ title, content, onConfirm, onCancel })
+     */
+    confirm: (contentOrOptions: string | UseModalShowOptions) => void;
+    /** 关闭 modal */
+    close: () => void;
+    /** 清除 loading 状态 */
+    clearLoading: () => void;
+};
+
+export type UseModalOptions = {
+    /** 是否使用全局根部 <u-modal global /> */
+    global?: boolean;
+    /** 是否使用页面级 <u-modal page /> */
+    page?: boolean;
+};
+
+function normalize(contentOrOptions: string | UseModalShowOptions): UseModalShowOptions {
+    if (typeof contentOrOptions === 'string') {
+        // 如果是简单的字符串，可能是标题或内容
+        return { content: contentOrOptions };
+    }
+    return contentOrOptions || {};
+}
+
+/**
+ * Modal 函数式调用
+ * @description 需要页面/应用中至少存在一个 <u-modal global /> 或 <u-modal page /> 实例用于承接事件；不影响原调用方式。
+ * 支持两种调用方式：应用级 useModal() / useModal({ global: true }) 页面级 useModal({ page: true }) / useModal(false)
+ */
+export function useModal(optionsOrGlobal: UseModalOptions | boolean = true): UseModal {
+    const isGlobal = typeof optionsOrGlobal === 'boolean' ? optionsOrGlobal !== false : optionsOrGlobal.global === true;
+    const isPage = typeof optionsOrGlobal === 'boolean' ? optionsOrGlobal === false : optionsOrGlobal.page === true;
+
+    const showEvent = isGlobal ? U_MODAL_GLOBAL_EVENT_SHOW : isPage ? U_MODAL_EVENT_SHOW : '';
+    const hideEvent = isGlobal ? U_MODAL_GLOBAL_EVENT_HIDE : isPage ? U_MODAL_EVENT_HIDE : '';
+    const clearLoadingEvent = isGlobal ? U_MODAL_GLOBAL_EVENT_CLEAR_LOADING : isPage ? U_MODAL_EVENT_CLEAR_LOADING : '';
+
+    function emitShow(payload: UseModalShowOptions) {
+        if (showEvent) {
+            uni?.$emit && uni.$emit(showEvent, payload);
+        }
+    }
+
+    function emitHide() {
+        if (hideEvent) {
+            uni?.$emit && uni.$emit(hideEvent);
+        }
+    }
+
+    function emitClearLoading() {
+        if (clearLoadingEvent) {
+            uni?.$emit && uni.$emit(clearLoadingEvent);
+        }
+    }
+
+    function show(contentOrOptions: string | UseModalShowOptions) {
+        emitShow(normalize(contentOrOptions));
+    }
+
+    function confirm(contentOrOptions: string | UseModalShowOptions) {
+        const options = normalize(contentOrOptions);
+        emitShow({
+            ...options,
+            showCancelButton: options.showCancelButton ?? true,
+            showConfirmButton: options.showConfirmButton ?? true
+        });
+    }
+
+    function clearLoading() {
+        emitClearLoading();
+    }
+
+    function close() {
+        emitHide();
+    }
+
+    return {
+        show,
+        confirm,
+        close,
+        clearLoading
+    };
+}

package/libs/hooks/useToast.ts

@@ -33,6 +33,8 @@ export type UseToast = {
 export type UseToastOptions = {
     /** 是否使用全局根部 <u-toast global />，默认 true；为 false 时走页面级 <u-toast /> */
     global?: boolean;
+    /** 是否使用页面级 <u-toast page /> */
+    page?: boolean;
 };
 
 function normalize(titleOrOptions: string | UseToastShowOptions): UseToastShowOptions {
@@ -42,24 +44,25 @@ function normalize(titleOrOptions: string | UseToastShowOptions): UseToastShowOp
 
 /**
  * Toast 函数式调用
- * @description 需要页面/应用中至少存在一个 <u-toast /> 实例用于承接事件；不影响原 ref 调用方式。
- * 支持两种调用方式：useToast() / useToast({ global: false }) / useToast(false)
+ * @description 需要页面/应用中至少存在一个 <u-toast global /> 或 <u-toast page /> 实例用于承接事件；不影响原 ref 调用方式。
+ * 支持两种调用方式：应用级 useToast() / useToast({ global: true }) 页面级 useToast({ page: true }) / useToast(false)
  */
-export function useToast(): UseToast;
-export function useToast(options: UseToastOptions): UseToast;
-export function useToast(global: boolean): UseToast;
-export function useToast(optionsOrGlobal: UseToastOptions | boolean = {}): UseToast {
-    const isGlobal =
-        typeof optionsOrGlobal === 'boolean' ? optionsOrGlobal !== false : optionsOrGlobal.global !== false;
-    const showEvent = isGlobal ? U_TOAST_GLOBAL_EVENT_SHOW : U_TOAST_EVENT_SHOW;
-    const hideEvent = isGlobal ? U_TOAST_GLOBAL_EVENT_HIDE : U_TOAST_EVENT_HIDE;
+export function useToast(optionsOrGlobal: UseToastOptions | boolean = true): UseToast {
+    const isGlobal = typeof optionsOrGlobal === 'boolean' ? optionsOrGlobal !== false : optionsOrGlobal.global === true;
+    const isPage = typeof optionsOrGlobal === 'boolean' ? optionsOrGlobal === false : optionsOrGlobal.page === true;
+    const showEvent = isGlobal ? U_TOAST_GLOBAL_EVENT_SHOW : isPage ? U_TOAST_EVENT_SHOW : '';
+    const hideEvent = isGlobal ? U_TOAST_GLOBAL_EVENT_HIDE : isPage ? U_TOAST_EVENT_HIDE : '';
 
     function emitShow(payload: UseToastShowOptions) {
-        uni?.$emit && uni.$emit(showEvent, payload);
+        if (showEvent) {
+            uni?.$emit && uni.$emit(showEvent, payload);
+        }
     }
 
     function emitHide() {
-        uni?.$emit && uni.$emit(hideEvent);
+        if (hideEvent) {
+            uni?.$emit && uni.$emit(hideEvent);
+        }
     }
     function show(titleOrOptions: string | UseToastShowOptions) {
         emitShow(normalize(titleOrOptions));
@@ -84,7 +87,7 @@ export function useToast(optionsOrGlobal: UseToastOptions | boolean = {}): UseTo
         loading: (v: any) => {
             const options = normalize(v);
             // loading 通常需要常驻，除非用户显式传 duration
-            emitShow({ ...options, loading: true, duration: options.duration ?? 1e9 });
+            emitShow({ ...options, loading: true, duration: options.duration ?? 0 });
         }
     };
 }

package/locale/lang/en-US.ts

@@ -1,5 +1,7 @@
 export default {
     name: 'en-US',
+    label: 'English',
+    locale: 'en',
     uActionSheet: {
         cancelText: 'Cancel'
     },

package/locale/lang/zh-CN.ts

@@ -1,5 +1,7 @@
 export default {
     name: 'zh-CN',
+    label: '简体中文',
+    locale: 'zh-Hans',
     uActionSheet: {
         cancelText: '取消'
     },

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式、多语言",
-    "version": "0.5.4",
+    "version": "0.5.5",
     "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题、暗黑模式、多语言，支持H5/APP/鸿蒙/小程序多端开发。已在鸿蒙应用商店上架，欢迎体验！",
     "main": "index.ts",
     "module": "index.ts",