global-feedback

Global Feedback Components

wot-starter provides global Toast, Message, and Loading components that support cross-page invocation.

Component List

Component	Purpose	Composable
GlobalToast	Light Toast	useGlobalToast()
GlobalMessage	Confirmation Dialog	useGlobalMessage()
GlobalLoading	Loading State	useGlobalLoading()

useGlobalToast

Basic Usage

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

// Show toast show('This is a toast')

// Success toast success('Operation successful')

// Error toast error('Operation failed')

// Info toast info('Info message')

// Warning toast warning('Warning message')

### 自定义配置

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

useGlobalMessage

Confirmation Dialog

const { confirm } = useGlobalMessage()

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

Combined with Promise

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

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

useGlobalLoading

Basic Usage

const { show, hide } = useGlobalLoading()

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

// 隐藏加载
hide()

Wrapping Asynchronous Operations

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

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

Using in Route Guards

// 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()
})

Component Configuration

Global components are already configured in App.ku.vue :

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

Notes

• These composables are implemented based on Pinia Store
• Support cross-page invocation
• Auto-imported, no manual import required
• Only one instance will be displayed at a time