通知

通知是数字产品中用户体验 (UX) 的关键组成部分，它连接系统与用户。它们应该增强而不是降低用户体验，帮助用户实现目标，并提供即时、相关的反馈。

通知类型及其用法

理解不同类型的通知

通知有多种形式，每种形式在应用程序中都具有特定的用途：

• 内联通知: 集成到任务流程中，用于告知用户操作状态或系统更改。Mautic 在内容区域顶部或相关项目附近显示这些通知。

• 吐司通知: 它们是基于时间的、出现在屏幕顶部的消息，并在短时间后消失。Mautic 将其显示为不需要用户交互的简短消息。

• 可操作通知: 包含交互元素，需要用户交互。它们的样式类似于内联或吐司通知，但由于其交互性，会更具侵扰性。

设计

• 仔细检查通知出现的上下文。谨慎使用它们，仅在它们能为用户体验增添价值时才使用。

• 在整个应用程序中保持通知的设计和行为的一致性。

• 对于关键消息，请务必使用高对比度的通知，因为低对比度的通知不太显眼。

内容

• 通知应简洁明了，标题简短且具有描述性。将正文内容限制为一到两句话。

操作

• 将可操作通知限制为每个通知一个操作，以避免让用户感到不知所措。

• 内联通知应持续显示，直到被用户手动关闭或通过操作解决。吐司通知可以超时，但也应包含一个关闭按钮。

辅助功能

• 通知应具有良好的辅助功能，并且不应仅依赖颜色来传达状态，因为这可能会给色盲的用户带来问题，因此请根据通知类型使用额外的 HTML 属性。

• 包含交互内容的吐司通知不应自动消失，以符合 Web 内容可访问性指南 2.1 的要求。

使用通知组件

带有图标的标准通知

对于包含图标的标准的通知，开发人员应使用一个 <div> 元素，该元素的类为 alert，以及另一个额外的类来指定通知类型：

• .alert-success 用于成功消息

• .alert-info 用于信息性消息

• .alert-warning 用于警告

• .alert-danger 用于错误

每个类都对应于特定的图标和颜色，这些图标和颜色通过 CSS 逻辑自动应用。

示例：

<div class=”alert alert-warning” role=”alert”>

没有安排发送的邮件。

</div>

这会显示一个带有适当图标和颜色样式的警告通知。

较大的无图标通知块

当您需要更大的通知块，例如包含标题或附加内容时，开发人员应使用 alert 类以及以 col- 开头的列类。 这些通知不显示图标，而只有左侧的彩色边框，用于指示通知类型。

示例：

<div class="alert alert-warning col-md-6">
  <h4>未找到结果</h4>
  <p>似乎没有！ 尝试更改过滤器（如果适用），或者创建一个新的过滤器？</p>
</div>

这会创建一个更实质性的通知块，带有标题和段落，通过左侧的黄色边框进行区分，但没有 accompanying 的图标。

用于通知面板的通知

NotificationModel.php 文件中的 NotificationModel 类管理面板下的通知。

Note

系统在 notification.html.twig 中定义了通知模板。

创建通知

要创建通知，请使用 NotificationModel 类的 addNotification 方法。 此方法接受几个参数来自定义通知：

$notificationModel->addNotification(
    $message,
    $type,
    $isRead,
    $header,
    $iconClass,
    $datetime,
    $user,
    $deduplicateValue,
    $deduplicateDateTimeFrom
);

Note

所有通知都必须定义一个标题字符串。

参数：

• $message string: 通知的主要内容。

• $type string|null: 用于标识通知的来源和样式 - 可选。

• $isRead boolean: 指示系统是否已将通知标记为已读 - 默认值：true。

• $header string|null: 通知标题文本 - 必需。

• $iconClass string|null: 通知图标的 CSS 类 - 例如，’ri-eye-line’。

• $datetime \DateTime|null: 警报的创建日期。

• $user User|null: 与通知关联的用户对象，默认为当前用户。

• $deduplicateValue string|null: 用于防止在指定的时间范围内出现重复通知。

• $deduplicateDateTimeFrom \DateTime|null: 自定义 去重时间范围.

Note

标题应仅包含翻译字符串，因为 Twig 处理翻译。

通知类型

$type 参数确定通知的视觉样式：

• 'success': 绿色提示框，带有成功图标。

• 'info': 蓝色提示框，带有信息图标。

• 'warning': 黄色提示框，带有警告图标。

• 'error': 红色提示框，带有错误图标。

• '' 空字符串：默认样式，不带颜色和图标。

示例用法

以下是如何在您安排联系人导出时创建通知：

public function onContactExportScheduled(ContactExportSchedulerEvent $event): void
{
    /** @var User $user */
    $user    = $event->getContactExportScheduler()->getUser();
    $message = $this->translator->trans('mautic.lead.export.being.prepared', ['%user_email%' => $user->getEmail()]);

    $this->notificationModel->addNotification(
        $message,
        'info',
        false,
        'mautic.lead.export.being.prepared.header',
        null,
        null,
        $user
    );
}

此用例展示了如何在 Mautic 中的事件驱动流程中集成 NotificationModel。

它使用特定的参数调用 addNotification 方法，这些参数针对联系人导出场景进行了定制。Translator 服务处理 $message 参数以生成本地化消息。

这种方法在通知消息中包含用户的电子邮件地址。系统使用翻译键 mautic.lead.export.being.prepared 以及参数 %user_email%，将其替换为安排导出的用户的实际电子邮件地址。

此方法允许将动态内容插入到翻译字符串中。如果用户电子邮件地址不需要出现在消息中，则可以使用标准的翻译字符串，而无需参数替换。

addNotification 调用中的其他参数同样重要。

系统将通知样式设置为信息提示框，使用 info 类型，这适用于已计划任务的状态更新。

对于 $isRead 的 false 值可确保通知显示为未读状态，从而吸引用户的注意力。

标题（类似于消息）也使用翻译键 mautic.lead.export.being.prepared.header 以保持语言一致性。

图标类和 datetime 值的 null 表示系统将对这些可选参数使用默认值。

最后，通过传递 $user 对象，该通知专门与发起导出的用户相关联，确保它显示在其个人通知面板中。