---

✅ 背景说明

在企业级系统中，用户操作后常需要即时反馈，如：

• 提交成功提示

• 删除失败警告

• 操作结果信息通知

如果每个页面都手写 Toast 或弹窗，会造成样式不统一、逻辑分散。
因此，封装一个全局可调度的 GlobalMessage 消息组件非常必要，它可以统一样式、集中控制、支持多种类型提示。

---

🧱 一、组件目标功能

• 支持三种消息类型：success / error / warning

• 支持传入消息内容、显示时长

• 自动消失 + 手动关闭支持

• 多个消息可堆叠展示

• 提供全局调用接口（服务模式）

---

📦 二、组件结构定义

interface MessageItem {
  id: string;
  type: 'success' | 'error' | 'warning';
  content: string;
  duration: number;
}

@Component
struct GlobalMessage {
  @State messages: MessageItem[] = [];
}

---

🧠 三、添加消息方法

function showMessage(type: MessageItem['type'], content: string, duration = 3000) {
  const id = `msg_${Date.now()}_${Math.random()}`;
  this.messages.push({ id, type, content, duration });

  setTimeout(() => {
    this.messages = this.messages.filter(m => m.id !== id);
  }, duration);
}

---

🧩 四、组件 UI 实现

build() {
  Column()
    .position({ x: 20, y: 20 })
    .zIndex(999)
    .alignItems(HorizontalAlign.Start)
    .space(10) {

    ForEach(this.messages, msg => {
      Row()
        .backgroundColor(this.getColor(msg.type))
        .borderRadius(8)
        .padding({ left: 14, right: 14, top: 8, bottom: 8 }) {
          Text(msg.content).fontSize(14).color('#fff')
        }
    }, msg => msg.id)
  }
}

private getColor(type: string): string {
  switch (type) {
    case 'success': return '#4caf50';
    case 'error': return '#f44336';
    case 'warning': return '#ff9800';
    default: return '#333';
  }
}

---

🧪 五、父组件注册使用

注册一次，挂载到根组件顶层，例如 App 页面中：

GlobalMessage ref={globalMessageRef} />

定义全局方法调用：

function showSuccess(msg: string) {
  globalMessageRef?.showMessage('success', msg);
}

---

✅ 使用示例：

Button('保存').onClick(() => {
  showSuccess('保存成功');
})

Button('删除').onClick(() => {
  globalMessageRef?.showMessage('error', '删除失败，请稍后重试');
})

---

⚠️ 六、常见问题与建议

问题	原因	建议
多条消息不消失	缺少超时清除	用 setTimeout + filter 实现过期移除
样式不统一	每种提示颜色随意写	建议通过 type -> color map 映射管理
使用复杂	每个页面都手动写逻辑	用 ref + service 方法 方式封装统一调用口

---

🚀 七、拓展建议

• 支持 info / loading / custom 类型扩展；

• 添加关闭按钮；

• 添加顶部 / 底部 /居中位置参数；

• 与事件总线结合实现页面间调用；

• 支持堆叠提示条（最多3条，自动替换旧的）；

---

✅ 小结

本篇封装了一个全局消息通知组件 GlobalMessage，帮助你实现统一的“提示反馈”体系，让每个页面都可快速调用、统一样式、自动管理生命周期，是提升用户体验和开发效率的关键工具之一。

下一篇将进入第12篇：

《第12篇：构建表单容器组件 FormWrapper（统一校验 + 错误提示 + 数据收集）》