全局轻提示 (GlobalToast) 使用指南

本项目基于 wot-design-uni 的 wd-toast 组件和 Pinia 封装了全局轻提示功能，允许在 JS/TS 中直接调用，无需在每个页面手动引入组件。

1. 核心特性

• 全局调用: 通过 useGlobalToast Store 在任意位置调用。
• 自动挂载: GlobalToast 组件已在 App.ku.vue 中全局注册，无需手动引入。
• 页面感知: 自动识别当前页面路径，防止跨页显示异常。

2. 快速开始

2.1 基础用法

import { useGlobalToast } from '@/composables/useGlobalToast'

const toast = useGlobalToast()

// 显示纯文本
toast.show('操作成功')

// 自定义配置
toast.show({
  msg: '加载中...',
  loading: true,
  duration: 0 // 0 表示一直显示，直到手动关闭
})

2.2 快捷方法

提供了常用的快捷方法：

const toast = useGlobalToast()

// 成功提示 (icon: success)
toast.success('保存成功')

// 错误提示 (icon: error)
toast.error('网络异常')

// 警告提示 (icon: warning)
toast.warning('请填写必填项')

// 信息提示 (icon: info)
toast.info('这是一条提示信息')

2.3 关闭提示

toast.close()

3. 参数说明 (ToastOptions)

show 方法支持字符串或对象参数。对象参数支持以下属性（继承自 wd-toast）：

属性	类型	默认值	说明
msg	string	-	提示文本
iconName	string	-	图标名称 (如 success, error)
position	string	middle	显示位置 (top, middle, bottom)
duration	number	2000	展示时长(ms)，0 为一直展示
loading	boolean	false	是否显示加载中图标
cover	boolean	false	是否存在遮罩层

4. 实现原理

1. 状态管理: useGlobalToast Store (Pinia) 维护 toastOptions 和 currentPage。
2. 组件监听: src/components/GlobalToast.vue 监听 Store 变化，调用 wd-toast 实例方法。
3. 页面校验: 每次调用 show 时记录当前页面路径，显示时校验是否匹配，确保提示只在当前页面显示。

5. 注意事项

• 无需手动引入组件: GlobalToast 组件已经在 App.ku.vue 中全局引入，不要在页面中再次引入 <wd-toast>，否则可能会导致 ID 冲突或样式问题。
• 异步操作: 如果在异步操作（如 API 请求）后显示 Toast，请确保页面未销毁或跳转。