全局反馈组件

wot-starter 提供了全局 Toast、Message、Loading 组件，支持跨页面调用。

组件列表

组件	用途	Composable
GlobalToast	轻提示	useGlobalToast()
GlobalMessage	确认弹窗	useGlobalMessage()
GlobalLoading	加载状态	useGlobalLoading()

useGlobalToast

基础用法

const { show, success, error, info, warning, close } = useGlobalToast()

// 显示提示
show('这是一条提示')

// 成功提示
success('操作成功')

// 错误提示
error('操作失败')

// 信息提示
info('提示信息')

// 警告提示
warning('警告信息')

自定义配置

show({
  msg: '自定义提示',
  duration: 3000,           // 持续时间
  iconName: 'success',      // 图标
  position: 'middle',       // 位置：'top' | 'middle' | 'bottom'
  direction: 'vertical',    // 方向：'horizontal' | 'vertical'
})

useGlobalMessage

确认弹窗

const { confirm } = useGlobalMessage()

confirm({
  title: '提示',
  msg: '确定要删除吗？',
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  success() {
    console.log('用户点击确定')
  },
  fail() {
    console.log('用户点击取消')
  },
})

与 Promise 结合

const handleDelete = async () => {
  return new Promise((resolve, reject) => {
    confirm({
      title: '确认删除',
      msg: '删除后无法恢复',
      success: resolve,
      fail: reject,
    })
  })
}

try {
  await handleDelete()
  // 用户确认，执行删除
} catch {
  // 用户取消
}

useGlobalLoading

基础用法

const { show, hide } = useGlobalLoading()

// 显示加载
show()
show('加载中...')

// 隐藏加载
hide()

包装异步操作

const fetchData = async () => {
  const { show, hide } = useGlobalLoading()

  show('数据加载中...')
  try {
    const data = await api.getData()
    return data
  } finally {
    hide()
  }
}

在路由守卫中使用

// src/router/index.ts
router.beforeEach((to, from, next) => {
  if (to.name === 'protected-page') {
    const { confirm } = useGlobalMessage()

    return new Promise((resolve, reject) => {
      confirm({
        title: '需要登录',
        msg: '是否前往登录？',
        success() {
          next({ name: 'login' })
          resolve()
        },
        fail() {
          next(false)
          reject()
        },
      })
    })
  }
  next()
})

组件配置

全局组件已在 App.ku.vue 中配置：

<!-- App.ku.vue -->
<template>
  <GlobalToast />
  <GlobalMessage />
  <GlobalLoading />
</template>

注意事项

• 这些 composable 基于 Pinia Store 实现
• 支持跨页面调用
• 自动导入，无需手动 import
• 同时只会显示一个实例