全局对话框 (GlobalMessage) 使用指南

本项目基于 wot-design-uni 的 wd-message-box 组件和 Pinia 封装了全局对话框功能，支持 Promise 风格调用。

1. 核心特性

• 全局调用: 通过 useGlobalMessage Store 在任意位置调用。
• Promise 支持: 支持 success/fail 回调，便于处理用户交互结果。
• 多种模式: 支持 Alert (警告框), Confirm (确认框), Prompt (输入框)。

2. 快速开始

2.1 引入 Store

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

const message = useGlobalMessage()

2.2 确认框 (Confirm)

最常用的模式，包含“取消”和“确定”按钮。

message.confirm({
  title: '提示',
  msg: '确定要删除这条记录吗？',
  success: (res) => {
    if (res.confirm) {
      console.log('用户点击了确定')
      // 执行删除逻辑
    } else if (res.cancel) {
      console.log('用户点击了取消')
    }
  }
})

2.3 警告框 (Alert)

仅包含“确定”按钮，用于强提示。

message.alert('这是一个警告信息，请注意！')

// 或者
message.alert({
  title: '系统通知',
  msg: '服务器维护中，请稍后再试。'
})

2.4 输入框 (Prompt)

允许用户输入内容。

message.prompt({
  title: '修改昵称',
  inputValue: '原昵称',
  inputPlaceholder: '请输入新昵称',
  success: (res) => {
    if (res.confirm) {
      console.log('用户输入的内容:', res.value)
    }
  }
})

3. 参数说明 (GlobalMessageOptions)

支持 wd-message-box 的所有配置项，并扩展了回调函数：

属性	类型	说明
title	string	标题
msg	string	内容文本
type	string	类型: alert, confirm, prompt
showCancelButton	boolean	是否显示取消按钮
inputValue	string	输入框默认值 (Prompt 模式)
inputPlaceholder	string	输入框占位符 (Prompt 模式)
success	(res: MessageResult) => void	成功回调 (点击确定/取消)
fail	(err: any) => void	失败回调

MessageResult 结构:

interface MessageResult {
  confirm: boolean // 是否点击确定
  cancel: boolean  // 是否点击取消
  value?: string   // 输入框的值 (Prompt 模式)
}

4. 实现原理

1. Store 封装: useGlobalMessage 封装了 alert, confirm, prompt 等方法，统一设置默认参数（如按钮圆角样式）。
2. 组件响应: src/components/GlobalMessage.vue 监听 Store 中的 messageOptions。
3. Promise 桥接: 组件内部调用 messageBox.show(option)，并在 Promise resolve/reject 时执行传入的 success/fail 回调。

5. 注意事项

• 回调处理: 务必在 success 回调中判断 res.confirm 或 res.cancel 来区分用户操作。
• 页面上下文: 与 GlobalToast 类似，GlobalMessage 也绑定了当前页面路径，防止跨页误弹。